vue 的基本语法

一 . Vue 的介绍

1 . 前端的三大框架 (可以去 GitHub 查看三个框架的 star 星)

　　vue   :  作者尤雨溪, 渐进式的JavaScript 框架

　　react :  Facebook公司, 里面的(高阶函数 es6) 非常多,对初学者不友好

　　angular :  谷歌公司,目前更新到6.0 ,学习 angular 需要会 typescript.

2 . vue的思想 :

　　数据驱动视图 , 设计模式 MVVM ( model view viewmodel )

3 . cdn 方式引用

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

4 . 下载到本地引用

<script src='./vue.js'></script>

5. 库和框架

　　上面的 vue.js 文件是一个库,小而精;

　　框架是功能比较齐全的, 像 Django ,大而全,功能比较多;

6. 实例化对象 　

　　示例代码 :

<script src="./vue.js"></script>
<script>
    new Vue({
        el:"#app"  // 绑定div的id值
        // 这里data 是一个对象,在后面的学习中会发现 data 中一般是一个函数
        data:{
            // 数据属性
            msg1:"黄瓜",
            person:{
                 name:"alex"
            },
            msg2:"hello Vue",
            isShow:"True"
        },
        methods:{
             // 该组件中声明方法
       },
       watch:{
            // 该组件中监听的数据属性
       }

});

</script>

　　注意 : 如果我们自己定义的属性和方法,则全部暴露在外面,如果是 vue 实例化对象自己的属性和方法,会在前边加上一个 " $ " 进行区分. 另外 , data 中有一个观察者 observer , 在观察着一些数据是否发生了改变,若改变,则将改变后的值立马渲染到 DOM 中对应的位置,控制台查看 data,效果图 :

二. vue 的模板语法

<div id="app">
    <!--模板语法-->
    <h2>{{ msg1 }}</h2>
    <h3>{{ 'haha' }}</h3>
    <h3>{{ 1+1 }}</h3>
    <h4>{{ {'name':'alex'} }}</h4>
    <h5>{{ person.name }}</h5>
    <h2>{{ 1>2?'真的':'假的' }}</h2>
    <p>{{ msg2.split('').reverse().join('') }}</p>
</div>

三 . vue的基本指令

　使用指令系统后面一定是字符串,且字符串中的变量一定是数据属性中已有的变量

　　⑴  v-text 和 v-html  ******

<div id="content">
    {{ msg }}
    <div v-text="msg"></div>    <!-- v-text相当于innerText -->
    <div v-html="msg"></div>    <!-- v-html相当于innerHTML -->
</div>
<script src="./vue.js"></script>
<script>
    // 实例化对象
    new Vue({
        el:"#content",
     // data中是一个函数 函数中return一个对象，可以是空对象，但不能不return
        data(){       // 函数的单体模式
            return{
                msg:"<h2>alex</h2>"
            }
        }
    });
</script>

　 　　效果 :

　⑵  条件渲染 v-if 和 v-show

<div class="box1" v-show="isShow">hello</div>
<div class="box2" v-if="isShow">hello</div>

分析 : isShow 为真则显示div , 为假则不显示;

区别 : v-show 为假时相当于 display:none ; v-if 为假时相当于移除该 div ,但是有一个占位的注释 " <!-- --> ";

官网对 v-if 和 v-show 的区别解释 :

　　1）v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

　　2）v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

　　3）相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。　　

　　4）一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if与v-else：可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-if="Math.random() > 0.5">
   Now you see me
</div>
<div v-else>
   Now you don't
</div>　　　　

　　v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

　　⑶ v-bind 和 v-on

v-bind : 标签中所有的属性,如 img 标签的 src alt , a标签的 href id class 等,如下 :

<img v-bind:src="imgSrc" v-bind:alt="msg">

v-bind : class='{active:isActive}' 表示若 isActive (数据库中定义的变量) 为真,则对应div 增加 active 类.否则不增加 , 如下 :

<div class="box" v-bind:class='{active:isActive}'></div>

v-on :  监听 js中的所有事件,如 click, mouseover , mouseout 等,如下

<button v-on:click="clickHandler">切换颜色</button>

v-bind的简便写法是":"，如：<div class="box" :class='{active:isActive}'></div>
v-on的简便写法是"@"，如：<button @click="clickHandler">切换颜色</button>

　　⑷  列表渲染 v-for (不仅可以遍历数组,还可以遍历对象), 如下 :

<div id="app">
    <ul v-if="res.status === 'ok'">
        <!-- v-for的优先级是最高的  diff算法 -->
        <li v-for='(item,index) in res.users' :key="item.id">
            <h3>{{ item.id }} -- {{ item.name }} -- {{ item.age }}</h3>
        </li>
    </ul>
    <div v-for='(value,key) in person'>
        {{ key }}-----{{ value }}
    </div>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                res: {
                    status: 'ok',
                    users: [
                        {id: 1, name: 'alex', age: 18},
                        {id: 2, name: 'wusir', age: 30},
                        {id: 3, name: 'yuan', age: 48}
                    ]
                },
                person: {
                    name: 'tom'
                }
            }
        },
        methods:{
            // 该组件中声明的方法
        },
        watch:{
            // 该组件中监听的数据属性
        }
    });
</script>

　　总结 : 遍历数组时,一个参数是值, 两个参数是( 值,索引 ) : 遍历对象时,一个参数是值,两个参数是( 值,键).

　　注意 : 一定要去绑定一个标识( 有id就绑定id , 没有id就绑定index-索引 ), 则值改变会直接通过 key 查找,而不是在去遍历查找,提升效率.