VUE之实例绑定、文本插值、基本指令、语法糖

数据绑定与Vue案例

该案例展示了Vue.js最核心的功能：数据的双向绑定。

//html
<div class="taxon">
<input type="text" placeholder="请输入您的名字" v-model="name">
<h1>你好,{{name}}</h1>
</div>```

//js
new Vue({
el:'.taxon',
data:{
name:''
}
})

实例与数据绑定

①创建根实例

Vue()构造函数的参数是一个键值对

var taxon = new Vue({
//代码块
})

②挂载根实例到元素上

第一个选项是el（element），用于指定页面中的DOM来挂载Vue实例，可以是HTMLElement或者CSS选择器。

//html
<div id="taxon">{{mess}}</div>

//js
var taxon =naw Vue({
el:document.getElementsById('taxon')//或着是'#taxon'
});

③绑定数据

data选项：设置实例中的数据，通过Vue实例的data选项，可以声明应用里需要双向绑定的数据，建议所有用到的数据预先在data里声明，不要散落在业务逻辑里，后期难以维护

声明数据分两种：1.显式声明数据

//html
<div id="taxon">{{shu}}</div>

//js
var taxon new Vue({
el:document.getElementById('taxon'),//或着是'#taxon'
data:{
shu:11
}
});
console.log(taxon.shu);

声明数据分两种：2.指向已有变量

此时两者会默认建立双向绑定，当修改其中一个时，另一个也会一起变化

//html
<div id="taxon">{{age}}</div>

//js
var myAge = {age:24};
var my={ag:12};
var taxon = new Vue({
el:'#taxon',
data:myA
3ff7
ge,
});
console.log(taxon.age);//24
//修改属性值，原始数据也会修改
taxon.age =25;
console.log(myAge.age);//25
//修改原始属性数据，Vue属性值也会改动
myAge.age = 26;
console.log(taxon.age);//26

Vue实例属性

1、Vue实例就是app，Vue实例属性就是app的属性

2、所有的选项前面加上$都是Vue实例的属性。
el：表示在Vue实例上挂载的DOM对象属性。app.el：表示在Vue实例上挂载的DOM对象属性。 app.el：表示在Vue实例上挂载的DOM对象属性。app.el === document.getElementById(“app”) //true

3、data：表示在Vue实例上挂载的数据属性。Vue实例代理了data选项中的所有属性：获取属性app.messageapp.data：表示在Vue实例上挂载的数据属性。 Vue实例代理了data选项中的所有属性：获取属性 app.message app.data：表示在Vue实例上挂载的数据属性。Vue实例代理了data选项中的所有属性：获取属性app.messageapp.data.age=== app.age//true

模板-文本插值

（1）语法格式：{{Vue实例数据变量}}
（2）特性：文本插值是双向绑定的，改变Vue实例数据变量的值，页面中文本插值的部分会重新渲染。

//html
<div id="taxon">{{bcc}}</div>

//js
new Vue({
el:'#taxon',
data:{
bcc:'展示消息'
}
});

如上所示，大括号里的内容会被替换为“展示信息”，修改数据book，会发生双向修改（2.0版本）
注意：结合Vue版本测试开发版与上线版区别（例如book与books提醒与否）

模板-基本指令

指令是Vue.js模板里最常用的一项功能，带有v-前缀
职责：当其表达式的值发生改变时，相应的将某些行为作用到DOM上

常用基本指令:
（1）v-html原始HTML：取值为一个带有HTML标记代码的变量，该指令会将变量中的HTML代码翻译为最终的显示效果

//html
<div id="taxon" v-html="chao"></div>

//js
new Vue({
el:'#taxon',
data:{
chao:'<a href="http://www.baidu.com">百度一下，你就知道</a>'
}
})

②v-once一次性绑定修饰符：该指令无需取值，让双向绑定变为单向绑定，直接添加到开始标签即可

//html
<div id="app">
<p v-once>{{msg}}</p >
<!--/*msg不会改变*/-->
<p>{{msg}}</p >
<p>
<input type="text" v-model = "msg" name="">
</p >
</div>

//js
let vm = new Vue({
el : '#app',
data : {
msg : "hello"
}
});

③v-pre跳跃编译修饰符：该指令无需取值，跳过文本插值的编译过程，显示文本原样。即跳过这个元素和它的子元素的编译过程，用来显示原始 Mustache 标签

//html
<div id="taxon" v-pre>{{mess}}</div>

//js
new Vue({
el:'#taxon',
data:{
mess:'展示信息'
}
});

④v-bind动态属性：常用于 8000 动态绑定HTML元素的属性，例如id、class、href、src等属性

//html
<div id="taxon" >
<a v-bind:href="url">链接</a>
<img v-bind:src="img">
</div>

//js
new Vue({
el:'#taxon',
data:{
url:'http://www.baidu.com',
img:'https://www.baidu.com/img/bd_logo1.png'
}
});

⑤v-on事件绑定—>监听DOM事件
语法格式：v-on:eventTypeName=“functionName”
上面是事件函数调用，接下来定义函数，注意：事件处理函数必须书写在Vue实例的methods选项下

```go
//html
<div id="app" >
<button v-on:click="prompt">{{info}}</button>
</div>
<script type="text/javascript">
new Vue({
el:"#appt",
data:{
info:'点击弹窗'
},
methods:{
prompt:function () {
alert("点击弹窗")
}

}
})
</script>

Vue.js语法糖：
Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了语法糖，也可以说是特定简写。

①v-bind:可以省略v-bind，直接写一个冒号：

②v-on:可以省略v-on，直接写一个@