一、初识 Vue
1. 在页面输出 HELLO VUE!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初识Vue</title> <!-- 引入Vue --> <script src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器 --> <div id="root"> <h1>HELLO,{{message.toUpperCase()}}</h1> </div> <script> Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示 // 创建Vue实例 ({})只传一个参数，类型为对象(配置对象) new Vue({ el: '#root', //el用于指定当前Vue实例为哪个容器服务 data: { //data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象 message: 'Vue!', } }) </script> </body> </html>
二、模板语法
Vue模板语法有 2 大类：
1. 插值语法
功能：用于解析标签体内容。
写法：{{xxx}}， xxx 是 js 表达式，且可以 直接读取 到 data 中的所有属性。
2. 指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx 同样要写 js 表达式，且可以 直接读取 到 data 中的所有属性。
3. 简写方式
v-bind 简写为 ：
v-on 简写为 @
4. 实例（插值语法和指令语法）
使用插值语法 {{xxx}} 和
v-bind指令呈现内容
<div id="root"> <h1>插值语法</h1> <h3>你好,{{name}}</h3> <hr/> <h1>指令语法</h1> <a v-bind:href="school.url">{{school.name}}</a> </div> <script> new Vue({ el:'#root', data:{ name:'八岁', school:{ name:'哔哩哔哩', url:'https://www.bilibili.com/' } } }) </script>
三、数据绑定
Vue中有两种数据绑定的方式：
1. 单向数据绑定(v-bind)
数据只能从 data 流向页面。
2. 双向数据绑定(v-model)
数据不仅能从 data 流向页面，还可以从页面流向 data。
3. 注意点
- 双向绑定一般都应用在表单类元素上 (如：input、select等)
- v-model:value 可以简写为 v-model，因为 v-model 默认就是 value 值。
4. 实例（完整写法）
<div id="root"> 单向数据绑定: <input type="text" v-bind:value="name1">{{name1}}<br/> 双向数据绑定: <input type="text" v-model:value="name2">{{name2}}<br/> </div> <script> new Vue({ el:'#root', data:{ name1:'单向数据绑定', name2:'双向数据绑定' } }) </script>
5. 实例（简写方式）
<div id="root"> 单向数据绑定: <input type="text" :value="name1">{{name1}}<br/> 双向数据绑定: <input type="text" v-model="name2">{{name2}}<br/> </div> <script> new Vue({ el:'#root', data:{ name1:'单向数据绑定', name2:'双向数据绑定' } }) </script>
四、el 和 data 的两种写法
1. el 有2种写法
- new Vue 时配置 el 属性。
- 先创建 Vue 实例，随后再通过 vm.$mount('#root') 指定el的值。
2. data有2种写法
- 对象式
- 函数式
- 如何选择：目前哪种方法都可以，以后学习到 组件 时，data必须使用函数式，否则会报错。
//对象式 data: { }
//函数式 data() { return { } }
3. 一个重要的原则
由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了。
4. el 的第一种写法
<div id="root"> <h1>你好,{{name}}</h1> </div> <script> new Vue({ el:'#root', data:{ name:'vue' } }) </script>
5. el 的第二种写法
<div id="root"> <h1>你好,{{name}}</h1> </div> <script> var v = new Vue({ data:{ name:'vue' } }) v.$mount("#root") </script>
6. data 的第一种写法（对象式）
<div id="root"> <h1>你好,{{name}}</h1> </div> <script> new Vue({ el:'#root', data:{ name:'vue' } }) </script>
7. data 的第二种写法 （函数式）
<div id="root"> <h1>你好,{{name}}</h1> </div> <script> new Vue({ el:'#root', data:function(){ return{ name:'vue' } } }) </script>
五、MVVM 模型
1. M：模型(Model)
data 中的数据
2. V：视图(View)
模板代码
3. VM：视图模型(ViewModel)
Vue 实例
4. 注意点
- data 中所有的属性，最后都出现在了 vm 身上。
- vm 身上所有的属性 及 Vue 原型上所有属性，在 Vue 模板中都可以直接使用。
<!-- div 里面是 View --> <div id="root"> <h1>学校名称：{{name}}</h1> <h1>学校地址：{{address}}</h1> </div> <script> new Vue({ // new Vue({})是 ViewModel el: '#root', data: { name: '青岛', address: '山东' // data 里面的内容是 Model } }) </script>
不积跬步无以至千里 不积小流无以成江海
