初学Vue2框架
Vue2的使用和基本结构
<script>
// 取消一个开发者提示
Vue.config.productionTip = false;
// 创建Vue实例 参数是对象 一个实例只能对应一个容器(先到先得)
const vm = new Vue({
// el是element缩写 用于指定当前Vue实例为哪个容器服务器,值通常为css选择器
el: '.demo',
data: {//data中存储数据供el所制定的容器使用
name: 'ldh',
age: 18,
},
computed: {//计算属性,当data中的属性被读取时触发回调函数(getter/setter)
uname: {
get() {
console.log('uname被读取');
return this.name;
},
set(value) {
this.name = value;
}
}
},
methods: {//存放用到的函数
tanchuang() {
alert('弹窗提示函数');
}
},
watch: {//检测data中数据发生改变时触发回调函数(handler)
name: {
handler(newValue, oldValue) {
console.log(this.name + '被修改了', newValue, oldValue);
}
}
}
});
</script>
1.想要让Vue工作就必须创建一个Vue实例,且要传入一个配置对象
2.必须有容器,el选择的容器,容器中的代码一样符合html规范
3.容器和实例必须一一对应(实际开发中只有一个Vue实例)
4.容器中的代码成为Vue模板
下面是容器中的代码
<body>
<div class="demo">
<h1>Hello,我是{{name}}</h1>
<h1>今年{{age}}了</h1>
<h3>我是{{uname}}</h3>
<button @click="tanchuang()">点击</button>
</div>
</body>
Vue模板语法分为两大类
1.插值语法
(1)写法{{xxx}} , xxx是js的表达式,Vue中的属性都可被读取(例如{{name}},则会读取到data中的name,显示ldh
(2)作用:解析标签体内容
注意!!!
{{xxx}}中的xxx要写js表达式 且xxx可以自动读取到data中所有的属性
一旦data中数据发生改变,那么模板中能用到的该数据的地方都会自动更新
注意区分:js表达式和js代码(语句)
1.表达式:一个表达式会产 成一个值,可以放在任何一个需要之的地方
(1) a
(2) a+b
(3) demo(1)
(4) x===y?'a':'b'
2.js代码(语句) 控制走向
(1) if(){}
(2) for(){}
2.指令语法:
功能:用于解析标签(包括:标签属性,标签内容,绑定事件......)。
举例:v-bind:href="xxx" 或者简写 :herf="xxx" xxx同样写js 表达式且可以读取data 中 的 所有属性,v-bind数据单向绑定,标签体内不能用{{}}插值语法,只能用指令语法解析标签中的内容
备注:Vue中有很多指令 v-??? ,此处只是用v-bind举例
框架中的基本属性
el: '.demo',
el属性:指定 Vue实例为那个容器服务,一个实例只能对应一个容器 功能类似于css选择器
data: {//data中存储数据供el所制定的容器使用
name: 'ldh',
age: 18,
},
data属性:存放数据,所有的数据都能被指定的容器读取
methods: {//存放用到的函数
tanchuang() {
alert('弹窗提示函数');
}
},
methods属性:存放需要用到的函数
computed: {//计算属性,当computed中的属性被读取时触发回调函数(getter/setter)
uname: {
get() {
console.log('uname被读取');
return this.name;
},
set(value) {
this.name = value;
}
}
},
computed属性:当computed中的属性被读取/被修改时调用getter/setter方法
watch: {//检测data中数据发生改变时触发回调函数(handler)
name: {
handler(newValue, oldValue) {
console.log(this.name + '被修改了', newValue, oldValue);
}
}
}
watch属性:侦听属性,监视data中的数据,发生改变时调用handler函数