本系列Vue学习笔记为我学习黑马程序员前端基础课程https://www.bilibili.com/video/BV12J411m7MG?p=2中所记录的重点以及部分代码运行的结果和过程。
vs code control+D可以选中所有相同元素

1.Vue简介

Vue是一个js框架，相比jquery这样的js库，框架的功能更为强大。
特点：

要严格遵循框架的使用规则。
简化DOM操作
传统DOM操作：获取元素->操作元素
VUE：vue特殊语法不用人为操作
响应式数据驱动
数据改变时页面会同步更新

2. Vue实例

Vue实例由一下几部分组成：el挂载点，data数据对象，methods方法。
Vue实例可以用以下结构表示：

var app=new Vue({
    el:"挂载对象"，
    data:{数据对象}，
    methods:{方法}
})

2.1 第一个Vue程序

导入开发版本的Vue.js
创建Vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

<!DOCTYPE HTML>
<html lang="EN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width.initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue基础</title>
</head>

<body>
    <div id="app">
        {{message}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"你好"
            }
        })
    </script>
</body>

</html>

3.el挂载点

注意事项：

el是用来设置Vue实例挂载的元素
vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器（选择器有class、id等），但是建议使用ID选择器，因为在css中每个元素的ID往往是唯一的
可以使用除了HTML和BODY以外的的双标签，如DIV，H2，P等

4.data数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可，比如对象的点语法、数组的索引语法
data的引用在body中存在不同的形式
在内容中应用的形式为{{变量名}}
而在属性中的引用形式为"变量名"

<!DOCTYPE HTML>
<html lang="EN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width.initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>data数据对象</title>
</head>

<body id="body">
    <div id="app">
        {{message}}
        <h2>{{school.name}} {{school.mobile}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
            <li>{{campus[0]}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"我是程序员",
                school:{
                    name:"Xiaoming",
                    mobile:"123456"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]
            }
        })
    </script>
</body>

</html>

5.Vue指令

5.1 内容绑定v-text

v-text指令的作用是：设置元素的文本值，本质为切换元素的textContent，简写为{{}}
Vue赋值文本内容有两种形式：

    <div id="app">
        <h2 v-text="message"></h2>
        <h2>{{message}}</h2>
    </div>

        var app=new Vue({
            el:"#app",
            data:{
                message:"我是程序员"
            }
        })

v-text这种默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容，如下所示

    <div id="app">
        <h2 v-text="message">阿曹</h2>
        <h2>{{message}}阿曹</h2>
    </div>

        var app=new Vue({
            el:"#app",
            data:{
                message:"我是程序员"
            }
        })

第一种方式输出我是程序员
第二种方式输出我是程序员阿曹

5.2 v-html

v-html指令的作用是设置元素的innerHTML；
内容中有html结构会被解析为标签；
v-text指令无论内容是什么，只会解析为文本。

<!DOCTYPE HTML>
<html lang="EN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width.initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue指令--v-text</title>
</head>

<body id="body">
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                // content:"我是程序员"
                content:"<a href='http://www.baidu.com'>我是程序员</a>"
            }
        })
    </script>
</body>

</html>

5.3 事件绑定v-on

v-on指令的作用是为元素绑定事件，指令可以简写为@

事件名不需要写on
绑定的方法写在methods中
方法中通过this关键字获取data中的数据
两种写法：v-on:或者@

    <div id="app">
        <input type="button" value="事件绑定" v-on:事件="方法">
        <input type="button" value="事件绑定" @事件="方法">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                方法: function () {
                
                }
            }
        })
    </script>

5.4 v-show

作用：根据表达式的真假，切换元素的显示和隐藏。
原理：修改元素的display的值。
应用场景：广告、遮罩层
特点：

指令后面的内容，最终都会解析为布尔值

5.5 v-if

作用：根据表达式的真假切换元素的显示状态
本质：通过操纵dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，为false，从dom树中移除
相比于v-show，该方法切换消耗较大

    <div id="app">
        <button @click="toggleIsShow">切换显示</button>
        <p v-if="isShow">vue指令--if</p>
        <p v-show="isShow">vue指令--show</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: true
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow=!this.isShow
                },
            }
        })
    </script>

执行上述代码，使用chrome打开F12开发者模式，打开element，通过点击button，可以看出v-if和v-show的区别如下：

实际工作中，频繁操作的元素用v-show，反之用v-if，因为操作dom数对性能消耗比较大。

5.6 v-bind

设置元素的属性（比如：src，title，class等），元素的属性有很多种，特点是都写在元素的内部。
使用方法：

v-bind:属性名=表达式
or
:属性名=表达式

example：
<img v-bind:src="imgAddress">
<img :src="imgAddress">
// :src和v-bind:src一样
<img v-bind:title="imgTitle">
<img v-bind:class="isActive?'active':''">
//三元表达式方式。isActive为true返回active，否则为空字符 
<img v-bind:class="{active:isActive}">
//对象方式。active是否生效取决于isActive的值

未完待续
欢迎批评指正！！！

Vue学习笔记1-简介