519 vue01( vue的绑定:变量,事件,属性)
01 vue绑定方式 :
(1)src中进行引入:或从cdn进行,或将vue.js下载到本地.
(2)执行时js代码前的声明:<script type='text/javascript> //这个声明一定要注明 type类型是text/javascript,不能省略,否则vue部分代码无法执行!!!
- 定义vue对象 var vue对象= new Vue({
el:"id选择" ,
data:{变量集合...},
methods:{方法集合},
});
(3)绑定完毕,现在操作 定义的vue对象即可操作所绑定的所有值和方法
02 vue绑定种类
1,绑定标签变量
在标签中增加变量标记,已{{ 变量名 }}方式进行;
var vue对象= new Vue({ el:"id选择" ,data{"标签内设定的变量名","值"}});2,绑定事件及事件对应方法
在标签中增加事件标记 v-on:click='方法名'
在 vue对象定义中增加: methods:{'方法名(){方法代码}} ,
3,绑定标签属性: 在标签定义时如: <p v-bind:属性名="vue对象内定义的变量名">
////////////////以下为范例代码
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{ aaa }}
<input type="button" v-on:click="cgf" value="genggai"/>
<div v-bind:title="aaa">
cccccccccccc
</div>
</div>
</body>
<script type ='text/javascript'>
var vm= new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
aaa:"llllll"
},
methods:{
cgf(){this.message='lsldklskdflskdf'} //绑定事件所执行的方法修改vm变量值
},
});
vm.message="kkkkkkkkk" //修改vm变量值
</script>
</html>
浙公网安备 33010602011771号