我是h2标签", //注意单引号
//message改变函数
func:function(){
if (this.message == "我是变量message的内容！") {
this.message = "message的内容改变了！";
}else{
this.message = "我是变量message的内容！";
}
}
然后看一下效果：
还是分析一下这个小demo。
{{message}}
Mustache 标签，也就是双大括号,他和 AnjularJs 的双大括号完全相同，就是直接将数据动态绑定到标签中，当变量发生变化的时候，标签内容也是改变，上大括号里面也是可以写表达式的。上述代码是做了一个 在button中点击改变变量message的值，然后通过数据绑定使div的text即时变化。
{{message}}
他也是数据绑定，但是只绑定一次。要注意 v-once是加载div上的，所以整个div的所有绑定数据，都只会加载一次，再更新就不会变了，所以点击 button时，第二个div的数据并没有发生改变。
是绑定HTML标签，注意 他可以直接绑定 HTML模板，但是这一堆HTML标签不能是多层嵌套的。什么意思呢，就是你之间绑定一段标签可以，绑定一个模板也可以，但是如果绑定一个模板，那这个模板内部不能再嵌套模板了。否则无法渲染的。上述代码就是直接导入了一个加了行内样式的h2标签，功能十分强大，比直接操作dom节点强太多了，效率是几何倍的增长。
（2） 其次是 v-bind
数据绑定篇
.aaa{
margin: 10px;
width: 100px;
height: 100px;
background-color: red;
}
.bbb{
margin: 10px;
width: 50px;
height: 50px;
background-color: blue;
}
-------------------------------------------------------------------------------------
//通过Vue.js的构造函数 实例化出一个根实例
var app1= new Vue({
el:"#app1",
data:{
myColor:"blue",
myWidth:100,
myHeight:100,
myClass:"aaa",
mySrc:"img/2.png",
func1:function(){
if (this.myColor == "blue") {
this.myColor = "red";
this.myWidth = 50,
this.myHeight = 50
}else{
this.myColor = "blue";
this.myWidth = 100,
this.myHeight = 100
}
},
func2:function(){
if (this.myClass == "aaa") {
this.myClass = "bbb";
}else{
this.myClass = "aaa";
}
},
func3:function(){
if (this.mySrc == "img/2.png") {
this.mySrc = "img/u=1622626696,1630096734&fm=23&gp=0.jpg";
}else{
this.mySrc = "img/2.png";
}
}
}
});
然后看一下效果：
那我们解析一下上面的代码。
v-bind 他是专门用来绑定属性的 ，主要用来操作元素的 class 列表和它的内联样式。这一点和AnjularJs的 ng-bind 是完全不同的，要注意！！！
这是在直接绑定行内样式style。然后通过绑定点击函数，为各个比那两赋值，达到点击更改div样式的目的。 这个是直接绑定修改 class类名，在页内样式表中有我定义的 .aaa 和 .bbb 两个类名，通过动态修改class名修改样式，这也比 JQuery 直接操作dom节点快捷不少。 ![]()
这是直接绑定属性，动态修改 img 的src 属性。达到点击图像显示不同的图像的效果。
这里要特别强调一下，v-bind 直接绑定的是属性，而不是样式 ，对于 img ，他的src是属性，但是对于 div ，width 啥的是样式，不是属性，所以 v-bind:width="100+'px'" 不好使.
至于 v-bind 属性绑定，也就常用用法也就这么多了。
（3） v-model
用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
下面我们看一段代码：
数据绑定篇
.aaa{
margin: 10px;
width: 100px;
height: 100px;
background-color: red;
}
.bbb{
margin: 10px;
width: 50px;
height: 50px;
background-color: blue;
}
{{ myText }}
-------------------------------------------------------------------------------------
男
女
您选择了: {{ picked }}
-------------------------------------------------------------------------------------
好帅！
你是我的男神！
我爱你，飞哥！
您对飞哥的评价: {{ names }}
--------------------------------------------------------------------------
真心话大冒险: {{ selected1 }}
------------------------------------------------------------------------------
你想和飞哥偷偷干些啥: {{ selected22 }}
//通过Vue.js的构造函数 实例化出一个根实例
var app1= new Vue({
el:"#app1",
data:{
myText:"",
picked:"",
selected1:"",
//这是复选列表的变量，函数
selected2:[],
selected22:"",
funcselected22:function(){
this.selected22 = this.selected2.join(" ");
},
//复选框的函数,及其相关变量
checkedNames:[],
names:"",
funcCheckedNames:function(){
this.names = this.checkedNames.join(" ");
}
然后看一下效果：
然后解析一下这段代码。这里就不一一详细解释代码了，挑几个典型的详解，其他的便很简单了。
我们就以 多选按钮为例：
好帅！
你是我的男神！
我爱你，飞哥！
//这是复选列表的变量，函数
selected2:[],
selected22:"",
funcselected22:function(){
this.selected22 = this.selected2.join(" ");
},这里要强调一下，v-model 动态绑定这种多选框之类的，会以数组的形式存取，所以，我们用 selected2:[], 变量接收 选择框 的数据，但是我们又不能直接用双大括号显示数据，朋友们可以试验一下，双大括号是纯文本显示，他会把整个数组的中括号，引号，逗号都显示出来，太丑了。所以这里，我用了JQuery的数组分割为字符串的函数 join(" ")，把选中的数据分割成字符串，再用一个字符串类型的变量接收数据，这样打印出来就好多了。注意，这里 join(" ") 我用的分隔符是 空白字符，它占一个汉字的空间，但是不会显示出来。
感谢各位的阅读！关于“Vue.js中基础指令的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
名称栏目：Vue.js中基础指令的示例分析
标题路径：http://bzwzjz.com/article/pdggpe.html
