2.1 Vue 模板语法
html 中包含了一些JS语法代码，语法分为两种，分别为:
- 【插值语法】双大括号表达式 （“Mustache”语法）【一个】
-
2.1.1 插值语法
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
插值语法：双大括号表达式 语法: {{exp}}
- 功能: 向页面输出数据
- 可以调用对象的方法
里面写js表达式：有返回值的js代码，而不是js语句data里面也可以放对象，例如下面例子中的school，指令语法也是一样，也可以用data里的对象名去.对象属性，例如：v-bind:href="school.url"
代码演示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个Vue</title><!-- 引入vue --><script type="text/javascript" src="../vuejs/vue.js"></script></head><body><!-- 准备一个容器，用户展示 Vue 构建的对象 --><div id="root"><h1>插值语法</h1><h3>您好！ {{name}}</h3><h3>您好！ {{school.name}}</h3><hr/></div><script type="text/javascript">//设置为 false 以阻止 vue 在启动时生成生产提示。Vue.config.productionTip = false//创建Vue实例new Vue({el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。name:'Jack',school:{name:'李四',url:'https://baidu.com'}}});</script></body></html>
2.1.2 指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx 同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是：v-???
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备一个容器，用户展示 Vue 构建的对象 -->
<div id="root">
<h1>指令语法</h1>
<h3><a v-bind:href="url">去百度一下</a></h3>
<hr/>
</div>
<script type="text/javascript">
//设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
//创建Vue实例
new Vue({
el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
url:'https://baidu.com'
}
});
</script>
</body>
</html>
演示效果：
**v-bind**：可以动态的绑定属性值，例如：v-bind:x="name"在 Vue 对象的data里就要有个 name的属性，v-band的简写形式 :，例如：:href="url"
2.2 数据绑定
2.2.1 单向数据绑定
语法：v-bind:href ="xxx" 或简写为 :href ="xxx"
特点：数据只能从 data流向页面，页面修改的值无法回填给data
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备一个容器，用户展示 Vue 构建的对象 -->
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name">
</div>
<script type="text/javascript">
//设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
//创建Vue实例
new Vue({
el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'Jack',
}
});
</script>
</body>
</html>
演示效果：
下面可以看到我修改了文本框里的值，data 里的 name 没有任何改变
2.2.2 双向数据绑定
指令 v-model
语法：v-mode:value="xxx" 或简写为 v-model="xxx"， 因为v-model默认收集的就是 value 值
特点：数据不仅能从 data 流向页面，还能从页面流向 data，不是所有元素都支持双向绑定，<h1></h1>h 标签就不支持双向绑定，v-model只能用于表单类元素(输入类元素，如：input、select等)
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备一个容器，用户展示 Vue 构建的对象 -->
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="age" ><p>{{age}}</p>
</div>
<script type="text/javascript">
//设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
//创建Vue实例
new Vue({
el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'Jack',
age:18,
}
});
</script>
</body>
</html>
演示效果：
可以看到双向绑定文本框值改变的时候，data 里的值也跟着改变，页面上的{{age}}也会改变
2.3 el 与 data 的表示方式
设置代码片段
选择好使用的位置，在 HTML 页面中的使用方式v1 + TAB
2.3.1 el 的表示方式
第一种方式
创建Vue实例对象时配置el属性
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备一个容器，用户展示 Vue 构建的对象 -->
<div id="root">
<h1>您好，{{name}}</h1>
</div>
<script type="text/javascript">
//设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
//创建Vue实例
new Vue({
el:'#root',
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'Jack'
}
});
</script>
</body>
</html>
第二种方式
先创建Vue实例，随后再通过vm.$mount( '#root ')指定el的值
我们先输出一下Vue对象实例，下面所有的带$符号的都是Vue给我们能调用的属性
在Vue实例中，我们能找对Vue的原型 Prototype，通过对原型的修改，可以实现就对象挂载到容器中，Prototype中的$mount是指定将对象挂载指定标识中、可以是id、class等。
代码演示：
从下面的代码可以看到，将Vue实例挂载到#root中，#root在绑定在标签上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<!-- 准备一个容器，用户展示 Vue 构建的对象 -->
<div id="root">
<h1>您好，{{name}}</h1>
</div>
<script type="text/javascript">
//设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
//创建Vue实例
const v = new Vue({
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'Jack'
}
});
console.log(v);
v.$mount('#root');
</script>
</body>
</html>
2.3.2 data 的表现方式
如何选择: 目前哪种写法都可以，以后到组件时，data必须使用函数，否则会报错—个重要的原则
由Vue管理的函数，一定不要写箭头函数，否则this 就不再是 Vue实例了
2.3.2.1 对象式
语法：data:{}
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue</title>
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<div id="root">
<h1>您好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'Jack'
}
});
</script>
</body>
</html>
2.3.2.2 函数式
语法：data:function(){return{name:'Jack'}} 简写方式 data(){}
特点：函数式方法必须要返回一个对象，data:function(){return{name:'Jack'}}在函数中的 this是 Vue实例
注意：如果是箭头函数表示data:()=>{console.log(this) return(name:'Jack')}里面的this就是全局的Window对象，因为箭头函数没有自己的this只能往上一个层级找，所以就找到了Window
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue</title>
<script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
<div id="root">
<h1>您好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:function () {
console.log(this)//此处的 this 是 Vue 实例
return{
name:'Jack'
}
}
});
</script>
</body>
</html>
演示效果：
若有收获，就点个赞吧
0 人点赞
