Vue - 入门教程

2.Vue简介

Vue的特点
1、采取组件化模式，提高代码复用率、且让代码更好维护
2、声明式编码，让编码人员无需直接操作DOM，提高开发效率
3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

展示数据时先生产虚拟DOM，然后转换成真实DOM
数据发生改变时，新数据生成的虚拟DOM通过Diff算法与旧虚拟DOM进行比较
比较出来的新虚拟DOM进行转换成真实DOM

3.Vue官网使用指南

英文官网:https://vuejs.org/
中文官网:https://cn.vuejs.org/
Vue2文档：https://v2.cn.vuejs.org/

4.搭建Vue开发环境

1.两种安装方式介绍

1、直接用 script标签 引入（新手选择学习这个）
2、使用NPM，需要配合命令行工具

开发时选择开发版本，有警告便于调试。上线时可以选择生产版本，体积更小。
开发版：vue.js
生产版：vue.min.js

2.使用步骤

1、下载vue.js放入目录
2、使用script标签引入vue.js
3、下载vue开发者工具（可能需要墙）
4、打开谷歌浏览器的扩展程序，将下载的工具拖入页面进行导入

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>初识vue</title><scripttype="text/javascript"src="../js/vue.js"></script></head><body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。</script></body></html>

5.Hello小案例

1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3、root容器里的代码被称为【Vue模板】；
4、Vue实例（比如div标签）和容器是一一对应的；
5、真实开发中只有一个Vue实例（比如div标签），并且会配合着组件一起使用；
6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>初识Vue</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器 --><divid="demo"><h1>Hello，{{name.toUpperCase()}}，{{address}}</h1></div><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。//创建Vue实例newVue({el:'#demo',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。name:'atguigu',address:'北京'}})</script></body></html>

6.分析Hello案例

注意区分：js表达式 和 js代码(语句)

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
变量：a
运算表达式：a+b
函数调用表达式：demo(1)
三元运算符：x === y ? ‘a’ : ‘b’

js代码(语句)
判断语句：if(){}
循环语句：for(){}

7.模板语法

Vue模板语法有2大类：

1. 插值语法：
   功能：用于解析标签体内容。
   写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2. 指令语法：
   功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
   举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
   备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>模板语法</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><h1>插值语法</h1><h3>你好，{{name}}</h3><hr/><h1>指令语法</h1><av-bind:href="school.url.toUpperCase()"x="hello">点我去{{school.name}}学习1</a><a:href="school.url"x="hello">点我去{{school.name}}学习2</a></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({el:'#root',data:{name:'jack',school:{name:'尚硅谷',url:'http://www.atguigu.com',}}})</script></html>

8.数据绑定

🎈单向绑定：用来获取，数据只能从data流向页面。
v-bind指令：单向数据绑定。这个指令一般用在标签属性里面，获取值。它的简写的形式就是一个冒号（:）

🎁双向绑定：v-model
单向绑定只能用来获取，双向绑定可以让值随着输入而改变。
数据不仅能从data流向页面，还可以从页面流向data。

备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>数据绑定</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><!-- 普通写法 --><!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/> 双向数据绑定：<input type="text" v-model:value="name"><br/> --><!-- 简写 -->单向数据绑定：<inputtype="text":value="name"><br/>双向数据绑定：<inputtype="text"v-model="name"><br/><!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 --><!-- <h2 v-model:x="name">你好啊</h2> --></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({el:'#root',data:{name:'尚硅谷'}})</script></html>

9.el与data的两种写法

el有2种写法
1、new Vue时候配置el属性。
2、先创建Vue实例，接到对象v，随后再通过vm.$mount(‘#root’)指定el的值。

data有2种写法
1、对象式：需要一个写一个，里面直接是数据
2、函数式：写成data函数，里面返回键值对

data有2种写法如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
注意：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>el与data的两种写法</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><h1>你好，{{name}}</h1></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。//el的两种写法/* const v = new Vue({ //el:'#root', //第一种写法 data:{ name:'尚硅谷' } }) console.log(v) v.$mount('#root') //第二种写法 *///data的两种写法newVue({el:'#root',//data的第一种写法：对象式/* data:{ name:'尚硅谷' } *///data的第二种写法：函数式data(){console.log('@@@',this)//此处的this是Vue实例对象return{name:'尚硅谷'}}})</script></html>

10.理解MVVM

1.M：模型(Model) ：对应 data 中的数据
2.V：视图(View) ：模板（div标签）
3.VM：视图模型(ViewModel) ： Vue 实例对象，new Vue，一般使用vm接收实例对象

观察发现：
1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>理解MVVM</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"><h1>学校名称：{{name}}</h1><h1>学校地址：{{address}}</h1><!-- <h1>测试一下1：{{1+1}}</h1> <h1>测试一下2：{{$options}}</h1> <h1>测试一下3：{{$emit}}</h1> <h1>测试一下4：{{_c}}</h1> --></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。constvm=newVue({el:'#root',data:{name:'尚硅谷',address:'北京',}})console.log(vm)</script></html>