vue初识，创建实例绑定容器，基本数据处理，v-if,v-else,v-else-if,v-text,v-html，v-show的含义

一.认识vue

1.简介

vue是一套构建用户界面的渐进式框架，是前端三大框架之一，由于是国人开发的所以很快受到了推广和应用。

2.vue由谁开发？.

尤雨溪

尤雨溪开发vue历程

二.Vue第一个实例

vue启动时出现的提示,Vue.config.productionTip阻止启动提示
1.创建实例化且绑定容器
html部分

<div id="abc" class="box">
        {{aaa}}--------
        <h1>
            {{a+b}}------{{c+d}}-----{{e+f}}-----{{c>9?1:2}}-----{{func(99)}}
        </h1>
    </div>

js部分

 // 创建一个新的实例化Vue
    var vms = new Vue({
        // el绑定创建的容器
        el:".box",
        // data用于定义变量的集合,通常与插值提供
        data:{
            aaa:"第一天学习Vue,class",
            a:"我是张三",
            b:"我今天学习vue",
            c:10,
            d:20,
            e:[1,2,3],
            f:[4,5,6],
            func(a){
                return a;
            }
        }
    })

注意：
1.搭建脚手架（vue-cli）后只能出现一个容器
2.el:“容器名称，如id或class等”
3.data:{}对象式
.data(){return{}}函数式
不要使用箭头函数,搭建脚手架（vue-cli）后，必须使用函数式
data用于定义变量的集合,通常与插值提供

2.绑定容器方法

1.用el
2.用 元素.$mount(“id值或者class类名”);

3.数据绑定

v-bind:直接读取到data中的属性

例：

 <div id="ips">
        {{this.abc}}
        <h1>
            <a href="http://www.baidu.com">访问百度</a>
            <!-- 指令
            1.绑定元素的属性 v-bind: -->
            <a v-bind:href="num">访问vue官网</a>
        </h1>
    </div>

 var vm = new Vue({
        data() {
            return {
                abc:"我是赵六",
                num:"https://v2.cn.vuejs.org/v2/guide/instance.html"
            }
        },
    })
    vm.$mount("#ips");

三.数据处理

1.括号里,可以写一些简单的事件处理,如果事件比较复杂,则需要配置methods对象,把方法写在methods里边

语法：
第一种： v-on:事件名=“事件处理 " 比如 v-on:click=” "
第二种 : @事件名=" 事件处理" 比如 @click=" "

例：

 <style>
        .box1 {
            font-size: 50px;
            color: red;
        }
        .box2 {
            font-size: 30px;
            color: pink;
        }
    </style>

    <div id="app">
        {{userName}}-------{{this.userName}}
        <a v-bind:href="abc">访问链接</a>
        <!-- 简写形式  : 
        v-bind:  ==  :    -->
        <a :href="aa">访问链接</a>
        <!--绑定事件   v-on:  ==  @
            v-on:事件类型   事件类型一定不要加on -->
        <button v-on:click="func()">点击</button>
        <button @click="func2()">点击2</button>
        <hr>
        <button @click="func3(1)">点击3</button>
        <button @click="func3(2)">点击4</button>
        <h1><a :href="loca">访问链接</a></h1>
        <h1>我现在点击的是{{btn}}</h1>
        <hr>
        <button @click="btns(1)">改变样式1</button>
        <button @click="btns(2)">改变样式2</button>
        <h1 :class="cla">今天学习vue第三天</h1>
        <h1 :style="sty[0]">今天学习vue使用style</h1>

    </div>

<script src="./vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var userName = "李四";
    var vm = new Vue({
        // el:"#app",
        data(){
            return{
                userName:"张三",
                abc:"http://www.baidu.com",
                aa:"https://v2.cn.vuejs.org/v2/guide/",
                loca:"",
                btn:"",
                cla:["boss","boss1","boss2"],
                // sty:"border:5px solid red;color:orange;",
                sty:[
                    {
                        "border":"5px solid red"
                    },
                    {
                        "color":"green"
                    }
                ]
                // sty:{
                //     border:"5px solid red",
                //     "color":"green",
                //     fontSize:"20px",
                //     "text-align":"center"
                // }
            }
        },
        // methods存放函数方法
        // 注：尽量不要使用箭头函数，否则拿取不到data的数据
        // 注：函数名称不要与变量名称一致
        methods: {
            btns(user){
                if(user==1){
                    this.cla = "box1";
                }else{
                    this.cla = "box2";
                }
            },
            // 点击这个访问百度
            func(){
                console.log(11111111);
            },
            // 点击这个访问vue官网
            func2:function(){
                console.log(222222222);
            },
            func3(user){
                console.log(this);
                console.log(this.userName);

            },
        },
    })
    vm.$mount("#app");

四.v-if,v-else,v-else-if,v-text,v-html，v-show的含义

1.v-if，v-for

v-for 遍历数组，对象，字符串，指定次数
v-if 做判断，隐藏(是否存在)

区别：

1.对于元素只是一次可以选择使用v-if(消耗内存),操作次数多v-show(并没有销毁元素)
2.在vue2中，v-for优先级比v-if高
3. 在vue3中，v-if优先级比v-for高
4… v-if和v-for不能同时使用
5.、同时使用需要在外层嵌套盒子，在外层进行v-if判断，在内层进行v-for循环

2.v-show

v-show 隐藏(是否展示) 默认隐藏

3.v-text和v-html，插值区别

1.v-text和v-html相同点：都会覆盖文本
不同点：v-text只读取文本，v-html读取标签
2.插值添加值，
注：不要在用提交时使用v-html,不要在动态渲染时时使用v-html

例如：

<div id="app">
<div v-text="a"></div>
 <div v-html="b"></div>
</div>

 Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
      
                a:"<h1>我是h1标签</h1>",
                b:"<h1>我是h1标签</h1>",
         
 
            }
        },

以上代码一出 那么类名为b的会有h1代码样式

4.使用v-else,v-else-if前必须有v-if