注意事项
//不要把id挂载在body上
vue中几种常见的属性:
data //用于存放数据
methods //用于存放方法 需要手动触发执行
computed //用于存放计算属性 用函数的样式写 retrun数据 默认执行(计算属性 不是方法 是属性,只是用方法的样式写) 默认只设置了get方法
watch //侦听属性,侦听某一个数据变动(优先使用计算属性)
vue中的this指的是vue整个实例化对象
vue创建时data里面的数据是响应式的 以后在添加的就是非响应式的 如果想加入响应式的数据需要使用$set
vue常用的几种指令:
1.v-model=数据 //写在元素属性上 用在input上v-model 等同与 v-bind:vlalue
v-bind:属性名=数据(v-bind可以简写成 : )
2.{{数据}} //写在元素内容上 即 Musrache语法—>双大括号语法
3.v-on:事件=方法(v-on可以简写成 @ ) //写在元素的属性上
4.v-if=判断
v-eles-if //写在元素属性上 如果为真保留,为假删除
5.v-show=判断 //写在元素属性上 如果为真显示,为假隐藏
7.v-for
eg:
<body>
<div id="app">
<input type="text" v-model=one>+<input type="text" v-model=two> = <span>{{sum}}</span><br>
<!-- <button v-on:click="xxx()">运行</button> -->
<span>{{name}}</span>
<span>{{now}}</span>
<p v-if="is">我今年{{age}}岁</p>
<ul>
<li v-for="(item,index) in wife" :key="index">{{item.name}}今年{{item.age}}岁</li>
</ul>
<a :href="url">百度</a>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
one: 1,
two: 2,
age: 21,
is: true,
name: "张三",
wife: [
{ name: "zhangshan", age: 12 },
{ name: "lisi", age: 14 },
{ name: "wangwu", age: 13 },
{ name: "maliu", age: 11 }
],
url:"http://www.baidu.com",
},
//计算属性
computed: {
sum() {
return (this.one - 0) + (this.two - 0)
},
now() {
return new Date().getTime()
}
},
//方法
methods: {
xxx() {
this.sum = (this.one - 0) + (this.two - 0)
}
},
//侦听属性,侦听某一个数据变动(优先使用计算属性)
watch: {
age(new_val, old_val) {
if (val < 0) {
this.age = old_val
} else {
this.age = new_val
}
}
}
})
</script>