初识Vue

1.Vue是什么？

vue是一套用来动态构建用户界面的渐进式Javascript框架。

2.Vue容器

<div id="app"></div>

容器 ，"app"容器名称

注意：容器名称尽量使用id绑定唯一值

 怎么使用"app"：需要el绑定

Vue.config.productionTip = false;

 var app = new Vue({

        el: '#app',

        data: {

            message: 'Hello Vue!',

            names:"张三"

        }

    })

  绑定容器的2种方式

 1.el绑定:"容器id或class等"

 2.Vue实例.$mount("容器id或class等"),注：一定写在最后 创建vue实例el是绑定容器，需要加#，不然启动时会失败 

el有两种方法：

1.创建Vue实例对象的时候配置el属性

2.先创建Vue 实例，随后再通过vm.$mount( ' #root ')指定el的值

阻止VUE在启动时产生的提示使用：Vue.config.productionTip = false;

data中装的是定义的变量，跟插值对应，并且data有两种写法

1.data:{}对象式

2.data(){return{}}函数式,注：搭建脚手架（vue-cli）后,一定要使用函数式

  注：不可以使用箭头函数

3.绑定元素和事件

绑定元素名称使用v-bind:属性名 == :属性名

v-pre可以跳过插值或指令不加载

v-once只加载一次，静态内容，因为不会修改值所以优化了性能

v-bind:单向数据绑定,由data流行页面

 v-model双向数据绑定，由data流向页面或页面(用户输入)流向data

绑定元素两种方法：

 <a v-bind:href="http">访问链接</a>

 <a :href="https">访问链接</a>

绑定事件：v-on:事件 == @事件

注：事件名称一定不要加on 

 例如：

 <button v-on:click="func1()">点击1</button>

 <button @click="func2()">点击2</button>

v-for用于遍历数组，对象，字符串，指定次数

例如：

<h1 v-for="(item,index) of objs" :key="index"></h1>

 注：:key="需要唯一" 

v-cloak 解决网速慢展示插值,页面出现闪烁或白屏,使用需要给标签添加v-cloak,还需要添加下面代码:

 [v-cloak]{

            display: none;

  }

v-if判断|显示隐藏，如果是正确就会显示，错误的话就不会显示

例如：

 <h1 v-if="b">11111</h1>

  <h1 v-if="c">22222</h1>

<script>

    Vue.config.productionTip = false;

    var vm = new Vue({

        el:"#app",

        data() {

            return {

                b:false,

                c:true,

                }

v-if和v-show区别：

1.相同的：都可以进行显示隐藏

2.不同点：v-if存在或不存在，v-show展示或不展示

3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗多次的显示隐藏推荐使用v-show

v-if和v-for优先级和使用事项：

 1.在vue2中v-for比v-if优先级高

 2.在vue3中v-if比v-for优先级高

 3.v-if和v-for在vue2或vue3中都不要同时使用，

 4.如果需要使用在外层先使用判断，在进行循环

v-text和v-html，插值 区别：

1.相同点：v-text和v-html都会覆盖原本内容

 2.不同点：v-text文本，v-html标签 插值会进行拼接

 注：一定不要在用户提交时使用v-html