vue的基本使用

一、下载vue.js

　　首先安装vue.js，然后在script标签中引入该文件，点击此处进入官方文档下载页面

　　也可直接在scripts标签中引用cdn：https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js

　　引入了vue.js文件之后便可以在html文件里使用vue相关语法。

二、vue基本语法

　　1、在script标签中创建一个Vue对象：

new Vue({
        // 表示这个Vue对象会应用到id=app的div里
        el:"#app",
        // 可渲染到页面里的数据部分
        data:{
            msg:'hello',
            hd:"<a href='https://cn.vuejs.org/v2/guide/'>点击</a>",
            str:"字符串"
        },
    })

　　2、在HTML里可如下展示：

<div id="app">
    <p>{{msg}}</p>    <!-- 可直接用大括号渲染data里的内容 -->
    <p>{{ 80+2 }}</p>    <!-- 可已进行算术运算 -->
    <p>{{ 20>30 }}</p>    <!-- 可已进行逻辑运算 -->
    <h1 v-text="msg"></h1>    <!-- 效果和直接用大括号一样 -->
    <h1 v-html="hd"></h1>    <!-- 可以识别并渲染标签 -->
    <h1 v-html="str"></h1>    <!-- 若不是标签，效果和text一样 -->
    <!-- 优先级：v-xxxx > {{}} -->
</div>

　　3、vue里的指令系统：

　　　　1）v-if和v-show

<div id="app">
     <p v-if="isShow">天王盖地虎</p>　　<!-- 可用v-else进行否则判断 -->
     <p v-show="isHide">宝塔镇河妖</p>
　　　　<!-- isShow和isHide是Vue对象里的变量 -->

</div>

　　　　　　- 它俩的区别是：若判断为false，v-if会将整个标签隐藏，而v-show是用"display: none"这一样式隐藏了内容

　　　　2）v-for：循环遍历模板里的值进行渲染：

<div id="app02">
    <ul>                                    <!-- 按位置传参 -->
        <li v-for="(item,index) in obj1">    <!-- item:值，index：索引 -->
            {{ item.username }}
            {{ item.age }}
            {{ item.sex }}
        </li>
    </ul>

    <ul>
        <li v-for="(item,key,index) in obj2">    <!-- item:值，key:键，index：索引 -->
            {{ item }}:{{ key }}:{{ index }}
        </li>
    </ul>

</div>

<script>
new Vue({
    el:"#app02",
    data:{
        obj1:[
        {username:"jason"},
        {age:20},
        {sex:"male"}
        ],
        obj2:{a:"张三",c:"李四",b:"王二",d:"麻子"},
    },
})
</script>

　　　　3）v-bind：用于响应式地更新 HTML 属性

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

　　　　　- 在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

　　　　4）v-on：用于监听 DOM 事件

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

　　　　　　- 在这里参数是监听的事件名