一.vue.js

1.优点

1)体积小,压缩后33K

2)更高的运行效率

3)双向数据绑定

4)生态丰富,学习成本低

2.Vue指令

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。

1)v-text

(1)作用 ：设置标签的文本内容 默认写法会替换全部内容，使用差值表达式可以替换指定内容

(2)内部支持写表达式：

<p v-text="message">aaaa</p>

<p>{{message}}aaaa</p>

2)v-html

--> {{message}}，v-text，v-html区别：

{{message}}  插入一个值,不影响标签中的其他内容

v-html="message" , v-text="message"会覆盖标签中其他内容

{{message}}，v-text="message"  不能解析内容中html标签

v-html="message"  可以解析内容中的html标签

3)v-on

作用：为元素绑定事件

事件名不需要写on指令可以简写为@

绑定的方法定义在methods属性中,可以传入自定义参数

4)v-model

v-model="变量"   把表单元素的value值绑定到vue对象的date中

作用：便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据表单元素的值 双向数据绑定

5)v-show

作用： 根据真假切换元素的显示状态

原理：修改元素的display，实现显示隐藏

指令后面的内容，最终都会解析为布尔值 值为true元素显示，值为false元素隐藏

数据改变之后，对应元素的显示状态会同步更新

6)v-if与v-else

作用：根据表达式的真假切换元素的显示状态

本质：通过操纵dom元素来切换

显示状态表达式的值为true，元素存在于dom中，为false，从dom中移除

区别：

v-show="布尔值"    true-显示   false-隐藏。控制标签display属性，显示隐藏标签的，效率高。

v-if="布尔值"    true-显示   false-隐藏。在隐藏时，删除了标签，显示时重新创建标签，效率低。

频繁的切换v-show，反之使用v-if，前者的切换消耗小

7)v-bind

属性名="变量名"   一旦为属性添加v-bind，值就是一个在date中定义的变量了

（可以简写为      ：属性名）

8)v-for

作用是根据数据生成列表结构

数组经常和v-for结合

使用语法是（item，index）in数据

item 和index 可以结合其他指令一起使用

数组长度的更新会同步到页面上是响应式的

为循环绑定一个key值 :key=”值” 尽可能唯一

二.vue生命周期

三.vue-cli 搭建项目

1.下载：

https://nodejs.org/en/download

2.终端的一些指令

导入新文件如果没有node_modules，在终端使用 npm install指令，安装下载项目依赖。

npm run serve --启动项目

ctrl+c --停止服务

npm run build --打包项目 

如果终端为空白，右键项目，最下端点击外部命令，点击npm run serve，进入终端。

3.创建组件

4.组件路由（切换组件）

1）组件模板格式

5.搭建步骤

1）创建router目录

2) 使用路由器

<router-link to="/index">首页</router-link>
 <router-link to="/content">内容</router-link>
 <router-view/>

3) 在main.js 中配置路由

4）使用

5）调试

（1）在终端输入 npm run serve 

报错：

运行成功：

（2）打开网页：

（点击登录或注册，切换到新页面上。严格来说只有一个页面，其他的称为组件）

优化：

（在index.js中配置完后，页面打开直接访问index）