双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app"> //v-model指令 输入时改变Vue中word的值
<input type="text" v-model="word">
//h2标签中的内容被word所影响
<h2>{{word}}</h2>
</div>
</body>
</html>
<script src="../Vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
word: "你好世界"
}
})
</script>
原生js实现双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<!-- 1.oninput事件在输入框改变内容时触发
传入input标签Value值
-->
<input type="text" value="" oninput="changeData(this.value)">
<h2 id="title">你好世界</h2>
</div>
</body>
</html>
<script>
var data = {};
var title = document.getElementById("title");
// 2.接收input标签传入的value值
// 并赋值给 data中的a
function changeData(value){
data.a = value;
}
// 给data对象设置访问器属性 'a'
// data.a === 调用get方法 返回get函数的返回值
// data.a = 123 赋值操作 调用set方法 赋的值相当于传参
Object.defineProperty(data, "a", {
// 定义"a"时 返回a
get: function(){
return "你好世界"
},
// 当值发生改变的时 调用set方法
//当set方法被调用时会自动生成参数 newvalue 等于 data.a
set: function(newValue){
//相当于title.innerHTML = data.a
title.innerHTML = newValue;
}
})
</script>
Vue常用指令
v-pre:
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-text:
相当于{{}}胡子语法，不会解析标签
v-html：
可以渲染数据，也会解析标签
v-cloak
cloak：斗篷，遮挡物；浏览器可能会直接显示未编译的Mustache标签，所以v-cloak可以避免这个问题 需要配合css使用 在style标签中 加入 [v-cloak]{display:none;}
v-show:
从css层面上控制元素显示隐藏 display:none;
v-if：
通过创建和销毁dom元素实现显示隐藏
可以在行内进行判断 语法和if一样
v-on：
为元素绑定事件可以直接在元素上 v-on:click="方法名称()" ，或者简写成 @click="方法名称()"
对应的方法要写在Vue对象中的 methods 中，在指令中想要访问data属性中的数据，可以通过this加上自己定义的属性名即可，this.自定义属性名称
