vue原理、基本使用

构建用户界面（向html里面填充数据） 框架（是一套现成的解决方案，遵守框架的规范，去编写自己的业务功能）

vue指令、组件、路由、vuex、vue组件库

特性：

数据驱动视图：

 

数据的变化会驱动视图自动更新；是单向的数据绑定从数据出发到数据视图  

双向数据绑定：

 

在网页中form用于采集数据，ajax用于请求数据。

js数据的变化会被自动渲染到页面上

页面上表单采集的数据变化，会自动被vue获取，并更新到js数据中

好处：开发者不用手动操作dom，来获取表单元素最新的值

MVVM：

 

Model表示当前页面渲染时所依赖的数据源

View表示当前页面渲染的DOM结构

ViewModel表示vue的实例，是MVVM的核心

vue的基本使用

1. 导入vue.js的script脚本
2. 在页面中声明一个将要被vue控制的DOM区域
3. 创建一个vm实例对象（vue实例对象）设置一些参数，包括要操作view和model

        const vue = new Vue({

                el: "#app",

                // data就是要渲染到页面上的数据

                data: {

                    username: "nihao"

                }

            })

指令是vue提供给开发者的模板语法，用于辅助开发者渲染页面的基本结构。

常用指令：

1. 内容渲染指令

v-text：会覆盖标签原有的内容

<p v-text="username"></p>

插值表达式：{{}}：

内容的占位符，不会覆盖原有内容

v-html:可以把带有标签的字符串渲染成真正的html标签

el：属性如果有多个相同的区域，只能控制一个！！！

1. 属性绑定指令：

插值表达式不能用在属性节点，只能用在内容节点

v-bind：eg：<input type="text" v-bind:placeholder="inputValue">

v-bind可以省略！！！简写（：）

1. 使用JavaScript表达式：（只能写一些简单的表达式）

        <p>{{number + 1}}</p>

        <p>{{ok ? 'True' : 'False'}}</p>

        <p>{{message.split('').reverse().join('')}}</p>

        <p :id="'list-' + id">xxx</p>

        <p>{{user.name}}</p>

在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号！！

1. 事件绑定指令：v-on：事件名称

eg：<button v-on:click="setcount">+1</button>

 

函数可以被简写。可以在绑定事件处理函数的时候可以使用（）进行传参！！

v-on：方法可以被简写成@符号

1. 事件对象：

vue提供了一个内置对象$event作为参数传递进去，这样我们就能在传入多个参数的情况下得到事件对象e。

1. 事件修饰符：

1. 按键修饰符：

监听键盘事件时，我们需要判断详细的按键，此时，可以将按键相关的事件添加按键修饰符；语法：

 

1. 双向绑定指令：

v-model：在不操作dom的前提下，快速获取到表单的数据

 

注：该指令只能配合表单元素一起使用。双向绑定就是能够立马拿到input输入的值，通过vm传送给model，model拿到之后，就立刻通过vm渲染到view上面。

下拉菜单：

  <select v-model="province" @blur="run">

        <option value="">请选择</option>

        <option value="北京">北京</option>

        <option value="河北">河北</option>

        <option value="黑龙江">黑龙江</option>

      </select>

使用了v-model就不用使用value属性了；能和input、textarea、select等一起使用。

v-model专用的修饰符：

 

注：.lazy属性

注：在事件绑定中调用函数传递的参数可以直接是一个model，不需要用v-bind指令。

eg：@keyup.enter="run(username)"

1. 条件渲染指令：

v-show的原理是：动态的为元素添加或者移除display：：none；，来实现元素的显示和隐藏；如果要频繁的切换元素的显示状态，此性能更好

v-if时每次动态的创建或移除元素，实现元素的显示和隐藏。

如果刚进入页面的时候某些元素不需要展示出来，以后这个元素很有可能也不需要被展示出来，此时性能更好。

eg：

  <p v-if="flag">请求成功 --- 被 v-if 控制</p>

      <p v-show="flag">请求成功 --- 被 v-show 控制</p>

v-if=“type === ”A“ “ v-else配合使用

还可以像

else if一样使用多层判断，v-else if=“type === ”B“ “

   v-for循环渲染标签：

官方建议用到v-for就给其绑定一个key属性

并建议把填入id的值，key的值时字符串或者数字类型，key的值千万不能重复，否则会报错；使用index的值作为key的值没有任何意义

在属性绑定中，可以通过for属性给label标签绑定一个区域！！！

form提交表单中绑定submit事件是给form绑定，设置button按钮type属性为submit就ok，且给form添加submit事件之后，会自动再绑定一个键盘enter点击事件！！

                <form class="form-inline" @submit.prevent="add" @keyup.esc="clear">
                    <div class="input-group mb-2 mr-sm-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text">品牌名称</div>
                        </div>
                        <!-- 文本输入框 -->
                        <input type="text" class="form-control" v-model.trim="value" />
                    </div>

                    <!-- 提交表单的按钮 -->
                    <button type="submit" class="btn btn-primary mb-2">添加品牌</button>
                </form>

label标签的用法：

<input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.status" />
<label class="custom-control-label" :for="item.id" v-if="item.status">已启用</label>
<label class="custom-control-label" :for="item.id" v-else>已禁用</label>

for 属性规定 label 与哪个表单元素绑定。

显式联系：

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />