Vue.js基础知识

1.安装-使用<script>引入
操作步骤：
（1）进入vue.js官网：https://cn.vuejs.org/v2/guide/installation.html
（2）点击开发版本

（3）拷贝开发版本页面的vue.js源代码
（4）创建项目目录文件夹VUE
（5）VUE目录下新建vue.js文件，将开发版本中的源代码放入vue.js文件内
（6）VUE目录下新建index.html文件，将vue.js通过<script>标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="vue.js"></script>
</head>
<body></body>
</html>

注意：引入需要放在head中引入，避免放在body内会发生抖屏的现象
2.创建一个Vue实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue入门</title>
        <script src="vue.js"></script>
  </head>
  <body>
      <div id="root">{{msg}}</div>
      <script>
        new Vue({
            el: "#root",//element 元素，挂载点，绑定dom节点：表示Vue的示例接管页面上的哪个元素，此时vue实例与id=root的dom进行了绑定 #的含义是id=
            data: { //存储数据，用于替换标签中的占位符，vue.js是通过数据操纵标签的
              msg:"Hello World"
            }
        })
    </script>
  </body>
</html>

3.挂载点，模板与实例的关系
（1）挂载点：vue的el属性id对应的dom标签
vue只会处理挂载点下面的内容
（2）模板：挂载点内部的内容都叫做模板
模板的两种写法：

<div id="root">
    <h1>{{msg}}</h1>  //1.直接写在挂载点的内部（建议）
</div>
<script>
    new Vue({
        el: "#root",
        data: { 
            msg:"Hello World"
        }
    })
</script>

<div id="root"></div>
<script>
    new Vue({
        el: "#root",
        template: '<h1>{{msg}}</h1>', //2.写在vue实例内部，template属性表示模板，只会显示在挂载点内部
        data: {
            msg:"Hello World"
        }
    })
</script>

上述两种方式显示结果一致，如下：

模板显示

（3）实例：将挂载点、模板、数据等属性写入实例，vue会自动结合模板和数据生成最终要展示的内容，然后将最终生成的内容放入挂在点之中
4.实例中的数据，事件与方法
（1）v-text指令，当前标签显示的内容,用户v-html同样可以实现

 <div id="root">
    <h1 v-text="number"></h1> //v-text此处可以替换成v-html，展示效果相同
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg:"Hello World",
            number:123
        }
    })
</script>

（2）v-text与v-html的区别
当上述例子中的number变为html标签时，使用v-text会将标签进行转义，将标签显示在页面中，而使用v-html将不会对标签进行转义，标签将不会显示在页面中

//使用v-text
<div id="root">
    <div v-text="content"></div>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            content:'<h1>Hello World</h1>>'
        }
    })
</script>

v-text页面展示

//使用v-html
<div id="root">
    <div v-html="content"></div>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            content:'<h1>Hello World</h1>'
        }
    })
</script>

v-html页面展示

（3）v-on，绑定事件的指令

//事件名称：click
//事件绑定的方法：handleClick
//方法写入实例的methods中
<div id="root">
    <div @click="handleClick">{{content}}</div>    //@为v-on:的简写
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            content:'Hello World'
        },
        methods:{
            handleClick:function () {
                this.content='world' //this表示当前实例下的data中的元素
            }
        }
    })
</script>

5.属性绑定和双向数据绑定
（1）v-bind：单向绑定指令，表示绑定属性 title表示被绑定的属性，=后面的数据表示实例中的属性，也可以是js表达式
单向绑定：数据决定页面显示内容，页面无法决定数据的内容

<div id="root">
    <div :title="title">hello world</div> //v-bind 缩写为：
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            title: 'this is hello world'
        }
    })
</script>

单向绑定示例

（2）v-model：双向绑定指令

<div id="root">
    <div :title="title">hello world</div> //v-bind 缩写为：，v-bind表示绑定属性 title表示被绑定的属性，=后面的数据表示实例中的属性，也可以是js表达式
    <input v-model="content"/> //使用v-model绑定后当变量content的进行变化是input的值也进行变化，当input输入框中的值进行变化时 content的值也会进行变化
    <div>{{content}}</div>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            title: 'this is hello world',
            content: 'this is content'
        }
    })
</script>

6.Vue中的计算属性和侦听器
（1）computed：vue实例的计算属性，conmputed指的是一个属性通过其它属性计算而来
优点：在如下例子中，当firstName和lastName中的值都未发生变化，此时computed不会重新计算fullName的值，会使用上次的缓存（内置缓存），只有当firstName和lastName中的任意值发生变化时才会重新计算fullName的值，性能较高

<div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
</div>
<script>
    new Vue({
        el: '#root',
        data:{
            firstName:'',
            lastName: ''
        },
        computed:{
            fullName:function () {
                return this.firstName + ' ' + this.lastName
            }
        }
    })
</script>

（2）watch：侦听器，用于监听某一个数据的变化，当数据发生变化时，我们就可以在侦听器中编写我们所需要的业务逻辑

<div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
    <div>{{count}}</div>
</div>
<script>
    new Vue({
        el: '#root',
        data:{
            firstName:'',
            lastName: '',
            count: 0
        },
        computed:{
            fullName:function () {
                return this.firstName + ' ' + this.lastName
            }
        },
        watch:{
            fullName: function () { //当firstName和lastName中任意一个数据发生变化，计数变量都会增加1
                this.count++
            }
        }
    })
</script>

7.常见指令
（1）v-if：条件指令

<div id="root">
    <div v-if="show">hello world</div> //只有当v-if的值为ture时，此标签的内容才会显示
    <button @click="handleClick">toggle</button>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            show:true
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>

（2）v-show

<div id="root">
    <div v-show="show">hello world</div> //只有当v-show的值为ture时，此标签的内容才会显示
    <button @click="handleClick">toggle</button>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            show:true
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>

（3）v-if和v-show的区别
v-if是在dom中中介把当前标签删除；而v-show是把当前标签的style属性中的display设置为none，把当前标签进行隐藏；
如果频繁的需要把当前标签的隐藏的频率高时，使用v-show会减少添加dom和小会dom的操作，性能较好
（3）v-for ,用户数据的循环展示

<div id="root">
    <div v-show="show">hello world</div>
    <button @click="handleClick">toggle</button>
    <ul>
        <li v-for="(item,index) in list" :key="item">{{item}}</li>
        <!--item 代表list中的每一条数据-->
        <!--使用v-for时需要搭配 key属性，他会提升页面渲染的效率-->
        <!--注意：key要求不能相同,index代表list每一项的下标，key设置为index每次都会不同-->
    </ul>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            show:true,
            list:[1,2,3]
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>