vue.js
**
vue.js
**
一·vue基本代码结构
1.引入Vue.js文件
<!-- 本地文件的方式引入-->
<script src="./lib/vue.js"></script>
2.`创建Vue实例对象new Vue()
//`创建Vue实例对象
var vm=new vue({
el:'#app',
data:{
msg:'hello world'
}
})
`
二.|.stop| 阻止冒泡 |
|.prevent|阻止默认事件|
| .capture | 添加事件侦听器时使用事件捕获模式 |
|.self| 只当事件在该元素的本身触发是触发回调 |
|.once|事件只触发一次|
三.
computed 计算机属性 返回值函数
filters 它是一个过滤属性 返回值函数需要传参 原始数据|过滤符|过滤函数
vue 本身不建议在差值表达式里 使用函数
四.
<body>
<div id="app">
<input type="text" v-model="num">
<select v-model="pre">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model="num1"/>
<button @click="resData">=</button>
<input type="text" v-model="result"/>
</div>
</body>
<script>
//v-model双向绑定 view->data (viewModel) data->view mvvm架构
new Vue({
el:"#app",
data:{
num:0,
num1:0,
result:0,
msg:"hello",
pre:"+",
},
methods:{
resData(){
var res=this.num+this.pre+this.num1;
this.result=eval(res);
}
}
});
</script>