Vue指令：
指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。
v-text，v-html：
html：
html
<div id="ddd">
<!--
{{插值表达插入变量，不会覆盖标签体中的内容}}
v-text,v-html会覆盖掉标签体中的内容
v-text会把内容当作文本处理
v-html会把内容当作html内容处理，可以解析标签
-->
<p>{{msg}} vue {{a}}</p>
<!-- <b>你好<b> vue -->
<p v-text="msg">vue</p>
<!-- <b>你好<b> -->
<p v-html="msg">vue</p>
<!-- 你好 -->
</div>js：
js
<script>
var msg="abc";
//new Vue对象
var ddd=new Vue({
el:'#ddd', //将id为app的标签与vue对象进行绑定
data:{ //data中用来定义与标签进行双向绑定的数据，可以定义多组的
msg:"<b>你好<b>",
a:10 //无分号
}
})
</script>v-model：
html：
html
<div id="ddd">
<!--
v-model可以将输入框的value与vue中数据进行绑定，
当输入框值发生改变时，自动更新到数据中
-->
<p> {{msg}} </p>
<input type="text" v-model="msg"/>
</div>js：
js
<script>
var msg;
var ddd=new Vue({
el:"#ddd",
data:{
msg:"vmodel"
}
})
</script>v-bind:
html:
html
<div id="ddd">
<!--
作用是为元素绑定属性
完整写法是 v-bind：属性名
简写的话可以直接省略 v-bind，只保留：属性名
-->
<img v-bind:src="img">
<img :src="img">
<img :src="img" title="这是一个图片">
</div>js:
js
<script>
var msg;
var ddd=new Vue({
el:"#ddd",
data:{
img:"../img/1.jpg"
}
})
</script>v-bind v-on:
html:
html
<div id="app">
<!-- 为class属性动态添加取消样式 -->
<img :src="img" :title="title" v-bind:class="{imgcss:isActive}">
<!-- v-on 为标签添加事件 -->
<input type="button" value="改变1" v-on:click="test1()">
<input type="button" value="改变2" @click="test2()">
</div>css:
css
<style>
.imgcss{
width: 100px;
height: 100px;
}
</style>js:
js
<script>
var app=new Vue({
el:'#app',
data:{
img:"../img/1.jpg",
title:"a",
isActive:false
},
methods:{ //定义函数 可以在函数中使用this关键字访问data中的数据
test1(){
this.isActive=false;
this.title="改变1";
},
test2(){
this.isActive=true;
this.title="改变2";
}
}
})
</script>v-if:
html:
html
<div id="ddd">
<!--
v-if v-show 都可以控制标签显示或隐藏
v-if 隐藏标签时，直接将标签冲网页中删除了
v-show 隐藏标签时，只是改变了标签的display值
-->
<img :src="img" v-if="isshow"/>
<hr>
<img :src="img" v-show="isshow"/>
<input type="button" value="操作" v-on:click="oper()"/>
</div>js:
js
<script>
var ddd=new Vue({
el:'#ddd',
data:{
img:"../img/1.jpg",
isshow:false
},
methods:{
oper(){
this.isshow=true;
}
}
})
</script>生命周期：
每个 Vue 实例在被创建时都要经过一系列的初始化过程------例如，需要设置数 据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时 在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添 加自己的代码的机会。
js
var ddd=new Vue({
el:'#ddd',
data:{
img:"../img/1.jpg",
},
methods:{
oper(){
}
},
// vue对象的生命周期钩子函数，在生命周期的每个阶段提供一个函数
// 供我们执行某些需要的操作
beforeCreate(){
console.log("vue对象创建之前");
},
created(){
console.log("vue对象创建完成");
},
beforeMount(){
console.log("对象与标签绑定之前");
},
mounted(){
console.log("vue对象与标签绑定之后");
// 常用，当vue对象创建成功，与标签绑定成功之后执行我们想要的操作
// 类似于之前的onload事件
}
})