Vue学习笔记
1. 模板语法
Mustache 语法
- 插值
- 指令
<span>Message: {{ msg }}</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
标签外数据绑定 {{}}
标签内数据绑定 v-bind:href == :href
双向数据绑定 v-model:标签 且只能用在表单等含value元素中
-->
<body>
<div id="root">
<h1>hello,{{test}}</h1>
单向数据绑定 <input type="text" :value="school.name" /> <br />
双向数据绑定 <input type="text" v-model:value="school.name" />
<!-- v-model:value="school.name" 可简写v-model="school.name" -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//创建一个实例
new Vue({
el: "#root",
data: {
test: "aa",
school: {
name: "haha",
},
},
});
</script>
</body>
</html>
vscode自定义代码片段
快速创建一个实例 : snippet generator 将代码转换为code-snippets
"": {
//快捷名称
"prefix": "vue",
"body": [
"new Vue({",
" el: \"\",",
" data: {",
" name: \"\",",
"},",
"});"
],
"description": ""
}
2.数据代理
- js中的简单数据代理
<script type="text/javascript">
let obj = { x: 100 };
let obj2 = { y: 200 };
Object.defineProperty(obj2, "x", {
get() {
return obj.x;
},
set(value) {
obj.x = value;
},
});
</script>
- Vue中的数据代理
<script type="text/javascript">
Vue.config.productionTip = false;
//创建一个实例
const vm = new Vue({
el: "#root",
data: {
test: "aa",
school: {
name: "haha",
},
},
});
</script>
用 vm
接收实例 , vm中的school
和 test
属性 , 实际上是data
中的属性,所以
vm --> set/get方法 --> data.属性
如何判断是否
vm
通过vm._data
访问data里面的值
<script type="text/javascript">
Vue.config.productionTip = false;
let data = {
test: "aa",
school: {
name: "haha",
},
};
//创建一个实例
const vm = new Vue({
el: "#root",
data,
});
</script>
通过这样,在控制台中可以得到:
> vm._data === data
< true
或者 vm._data.test
如此得到
3.事件处理
用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript
代码