基本语法
new Vue({
el:'XX' // css的选择器。 意思就是管理这个标签内部的所有内容。
data:{
msg:'hellow world'// 模型 ,给el选择出来的内容提供数据
}
})
vue的一些内置指令
指令:是特殊的带有前缀v-的特征
扩展了 html原有标签属性功能
v-text: 把模型当中的内容当做文字展示到页面当中
v-html: 把模型当中的内容当做普通html插入
v-show: 根据表达式的值来 显示或隐藏html元素 display:none
v-if: 根据表达式的值在dom中生成或者移除一个元素
v-else: 就是javascript中else的意思,必须跟着v-if或v-show,充当else的功能
v- for : 基于原收据重复渲染元素,遍历,迭代
v-model:数据双向绑定
v-pre:跳转编译,不去解析里面的内容
v-clock: 防止闪烁
数据放在data里面
vue绑定事件
事件放在methods里
//html
<button @click='fn()'>点击按钮<button>
//小括号可以不用写
// js
var vue = new Vue({
el:'.box',
data:{
msg:'XXX’
},
methods:{
fn:function(){
alert('hellow world')
}
}
})
//阻止事件的默认行为和阻止事件冒泡
methods:{
show:function(e){
e.cancelBubble = true;
e.preventDefault();
}
}