Vue 第一课，最基础知识 也是不可缺少的！

导读：

1，前端 三大框架

Vue.js                             Angular.js                            React.js

2，Vue.js 的特点及与优缺点

1），特点：响应式编程、组件化

2），优点：

1. 轻量级框架(压索之后20KB大小)、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
2. vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

3），Vue的缺点

1. VUE不支持IE8
2. Vue 不缺入门教程，可是很缺乏高阶教程与文档。同样的还有书籍。
3. 可扩展性稍差
4. 生态环境差不如angular和react

注意！主要内容 “它” 骑着小三轮走来了。

1，导入与实例化

        1，模板

<div id="app">
<h1>{{msg}} </h1>
<input type="text" v-model="msg"> <!--  指令 -->
</div>

        2， 引入Vue文件

<script src="./js/vue.js"></script>

        3， 实例化vue起步！

new Vue({
el: "#app", //指定模板返回
data: {
msg: "你好vue！"
            }, //指定数据
        })

 2，指令与模板

 1，大概结构

2，特点

1. 就是v开头的特殊属性 他的值预期为javascript单行表达式
2. 可以渲染实例的值      v-text=‘msg’
3. 数学运     v-text=‘2+3’
4. 使用js表达式      v-text='msg.length'
5. 如果是文本需要加单引       v-text=“‘我在’+ msg”

3，指令是联系模板与vue实例的桥梁

3， 文本渲染指令

1. {{}}
2. v-text     文本渲染指令
3. v-html       html文本渲染指令

4，条件渲染指令

1. v-if
2. v-else
3. v-else-if
4. v-show

                隐藏元素以CSS的方式

                频繁切换用v-show

​                少量切换用v-if

5，遍历指令

v-for

1. 字符串，数字，数组，对象进行遍历
2. <li v-for="(item,index) in list">{{index+1}}--{{item}}</li>
3. item 遍历的元素（自定义的名称)
4. ​index 遍历的下标（键名)
5. list 被遍历的数据

v-key

1. 值必须是唯一的，为了让vue更好的优化渲染列表

6，属性指令绑定

        v-bind : title="msg"

         简写   :title="msg"

1.  : clss
2. : id
3. : disabled

7，事件

1. v-on : click = " num++ " 事件指令

2. @click = " num++ " 事件绑定简写

3. 事件的参数

                @click="sayNum”
                默认传入事件对象

                @click="sayNum(3)”
                传入实参3

                @click="sayNum($event,3)"
                传入事件对象，和参数3

        

        4，事件修饰符

                .stop 阻止事件冒泡

                .prevent 阻止默认事件

                .once 只响应一次

        5，按键修饰符       keydown , keyup

                .enter 回车

.                tab 制表

                .delete “删除”和“退格”键

                .esc 取消

                .space空格

                .up 上

                .down 下

                .left 左

                .right 右

        6，系统修饰符

                .ctrl

                .shift

        7，鼠标修饰符

                .left

                .right

                .middle

8，表单

        1，表单修饰符

                . number
                强制转数字

                . lazy
                更新视图触发事件有 input 变成 changa事件

        2，v-model=” text “ 简写             把num的数据跟表单绑定

                是 :value="text"

                和 @input="text=$event.target.value" 组合的简写!!!

9，vue 操作

        让指令链接 数据与dom

        业务操作数据，实现自动更新dom

10，el 元素

1.  用于选取一个 DOM 元素作为 Vue 实例的挂载目标。
2. 只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。
3. 代表 MVVM 中的 View 层（视图）。
4. 可以为 CSS 选择器格式的字符串 或 HTMLElement 实例，但不能为 html 或 body。
    

11，computed 计算

        从现有数据计算出新的数据（ 只读 ）

12，watch 监听

        监听数据的变化执行回调函数

 13，clss

                对象 :class="{'active':flag}"

                数组 :class="list"

                文本   :class="active"     没有加单引号的active是一个变量不是字符串

14，style

                :style = " { color:'red',fontSize:'24px" } "

                css属性驼峰式写法

1回顾

1. 数组
   • reverse 翻转
   • concat ( ） 连接数组
   • join ( ) 转字符串
   • indexOf （ ） 查找对应下标
   • 删除
     • shift 前删除
     • pop 后删
     • splice 中间删
   • 添加
     • push 后加
     • unshift 前加
     • splice 也可以添加
   • 高阶
     • find 查找符合条件元素
     • filter 过滤
     • findIndex 查找符合条件的元素下标sort 排序
     • forEach 遍历
     • map 映射
     • reduce 累计
     • some 有一个
     • every 每一个
2. 字符串
   • lndexOf lastIndexOf 查询字符串下标，找不到返回-1
   • slice ( start,end ) 切割字符串
   • split ( " ) 分割为数组
   • subString ( start , end ) 截取字符串（按下标end)
   • subStr ( start , len ) 截取字符串（按长度len）
3. json
   • eval() 字符串当js执行
   • JSON.parse(str) json字符串转换为js对象
   • JSON.stringify(obj) 把js对象转换为json字符串
4. 本地存储
   • localStorage . getItem（ key ） 获取值
   • localStorage . setItem（ key , value ） 存储值
   • localStorage . removeltem（ key ） 存储值
   • clear ( ) 清空