什么是Vue

Vue.js 是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的视频讲解

<a href="https://learning.dcloud.io/#/?vid=0"></a>

让我们通过实例来看下 Vue 构造器中需要哪些内容:

    <div id="app">
        <h1>site : {{name}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                name: "星河的完美天空",
                url: "https://blog.csdn.net/weixin_52555763?spm=1000.2115.3001.5343",
                alexa: "10000"
            },
            methods:{
                details(){
                    return  this.name + " --- 灰常 漂亮 ~~~";
                }
            },
            mounted(){
                
            }
        })
    </script>

在代码中可以清除的看见 id 在DOM元素中为 id 的 vue_det 也可以硕为挂载点为div的：

<div id = "vue_det"></div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象。

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

    <div id="app">
        <h1>site : {{name}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>

当一个实例被创建时，Vue的响应式系统在他的data中找到所有的属性值，当这些属性值发生变化时，HTML视图也会发生变化。

Vue.js 的模版语法

数据绑定最常见就是使用 {{}} 文本插值表达式。

    <div id="app">
        <h1>{{name}}</h1>
    </div>

1、v-html解析标签

    <div id="app">
        <div v-html = "name"></div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                name: "<h1>星河的完美天空</h1>",
            }
        })
    </script>

在使用v-html当中，会解析你的data数据里面标签。

2、v-text 返回的效果

    <div id="app">
        <div v-text = "name"></div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                name: "<h1>星河的完美天空</h1>",
            }
        })
    </script>

 v-text返回的效果和{{}}一样只不过把里面的内容返回，并不会解析里面的标签。

3、v-bind绑定数据

    <style>
        .p{
            background-color: red;
        }
    </style>
    <div id="app">
        <!-- v-bind 的缩写为 ：-->
        <label for="b1">改变颜色:</label><input type="text" id="b1" v-bind:class = "{p:use}">
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                use: true
            }
        })
    </script>

**批注** style 标签的位置 是为了更能方便的看见 望大家小朋友更能得遵守代码规范

input 的绑定 v-bind 绑定数据 为 true 的时候就会显示 p 的样式  否则就不显示

4、v-if和v-show的区别

    <div id="app">
        <h1 v-if = "use">现在能看见我啊~~~我是H1</h1>
        <h2 v-show = "users">你也能看见我~~~我是H2</h2>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                use: true,
                users :true
            }
        })
    </script>

大家来看一下v-if和v-show的切换

 v-if默认为 true显示 

 

 v-if和v-show的区别？

1、v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好。

2、v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。所以当程序不是很大时候，v-if和v-show区别都不大，如果项目很大，推荐多用v-show，较少浏览器后期操作的性能。

5、v-model的数据的双向绑定

    <div id="app" style="text-align: center;margin-top: 30px;">
        星河灿烂 : <input type="text" v-model = "all">
        <p>我在这呢 : {{all}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                all:'您好~星河~~~'
            }
        })
    </script>

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

6、v-on的事件监听，并对用户的输入做出响应

    <div id="app" style="text-align: center;margin-top: 30px;">
        <!-- v-on的缩写 为 @ -->
        <button v-on:click = "app">点击我会 + 1 -- {{msg}}</button>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:1
            },
            methods:{
                app(){
                    this.msg++
                }
            }
        })
    </script>

以上就是在使用Vue的模版语法 最常见的几种语法案列 并且 想专心学习就上官方文档查找，关注我，下期更精彩~~~

本章节为原创，哈哈哈，但部分题材转载，感谢您的原谅~