vue基础语法

在js中使用vue

<!--挂载点、模板、与实例   #app这个dom节点在此处为一个挂载点、{{hello}}叫做插值表达式属于模板、vue为一个实例-->

代码：
<script src="vue.js"></script>
<div id="app">
    {{hello}}
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

1. v-cloak

防止页面加载时出现闪烁问题

代码：

<style>
        [v-cloak]{
            display: none;
        }
    </style>
<div id="app">
    <div v-cloak>
        {{hello}}
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

2. v-text

更新标签内文字

<div id="app">
    <div v-text="hello">
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

3. v-html

更新元素的 innerHTML (html标签会被编译)

<div id="app">
    <div v-html="hello">
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>"
        }
    })
</script>

4. v-show

根据表达式之真假值，切换元素的 display CSS 属性

<div id="app">
    <div v-show="ok" v-html="hello"></div>
    <div v-show="no" v-html="hello"></div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            ok:true,
            no:false,
            hello:"<h1>Hello Vue</h1>"
        }
    })
</script>

5. v-model（双向数据绑定）

当数据发生变化的时候，视图也就发生变化

当视图发生变化的时候，数据也会跟着同步变化

<div id="app">
    <input v-model="hello">
    <div>{{hello}}</div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:""
        }
    })
</script>

6. v-on
    v-on 指令用法
<input type=‘button' v-on:click='num++'/>
    v-on 简写形式
<input type=‘button' @click='num++'/>
    直接绑定函数名称
<button v on:click='say'>Hello</button>
    调用函数
<button v on:click='say()'>Say hi</button>

   事件函数参数传递

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数

如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

<button v-on:click='say("hi",$event)'>Say hi</button>
<div id="app">
    <button v-on:click="handle1">点击1</button>
    <button v-on:click="handle2(12,$event)">点击2</button>
</div>
<script>
    var vue=new Vue({
        el:"#app",
        data:{

        },
        methods:{
            handle1:function (event) {
                alert(event.target.innerHTML);
            },
            handle2:function (p1,event) {
                alert(p1+event.target.innerHTML);
            }
        }
    })
</script>

7. v-bind

v-bind 指令被用来响应地更新 HTML 属性

v-bind:href 可以缩写为 :href;

<div id="app">
    <!--  标准形式  -->
    <a v-bind:href="url">{{targ}}</a>
    <!--  简写形式  -->
    <a :href="url">{{targ}}</a>
    <button @click="handel">修改跳转目标</button>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            targ:"跳转百度",
            url:"https://www.baidu.com"
        },
        methods:{
            handel:function () {
                if (this.targ=="跳转百度"){
                    this.targ="跳转莫逸风博客";
                    this.url="https://blog.csdn.net/qq_38723677";
                }else {
                    this.targ="跳转百度";
                    this.url="https://www.baidu.com"
                }
            }
        }
    })
</script>
v-bind实现双向数据绑定
<div id="app">
    <input type="text" v-bind:value="val" @input="handel">{{val}}
    <input type="text" v-bind:value="val2" @input="val2=$event.target.value">{{val2}}
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            val:"",
            val2:"",
        },
        methods:{
            handel:function (event) {
               this.val=event.target.value;
            }
        }
    })
</script>

8. v-if、v-else、v-else-if

多个元素 通过条件判断展示或者隐藏某个元素

<div id="app">
    <input v-model="score">
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=80&&score<90">良好</div>
    <div v-else-if="score>=70&&score<80">一般</div>
    <div v-else>较差</div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            score:100,
        }
    })
</script>

9.v-for

v-for遍历数组

 <li v-for="item in fruits">{{item}}</li>
 <li v-for="(item,index) in fruits">{{index}}-----{{item}}</li>
 <li v-for="item in myFruits">{{item.cname}}----{{item.ename}}</li>

key 的作用：仅使得vue提高性能，无其他变化

key来给每个节点做一个唯一标识

key的作用主要是为了高效的更新虚拟DOM

<div id="app">
    <ul>
        <li v-for="item in fruits">{{item}}</li>
        <li v-for="(item,index) in fruits">{{index}}-----{{item}}</li>
        <li v-for="item in myFruits">{{item.cname}}----{{item.ename}}</li>
        <li :key="index" v-for="(item,index) in fruits">{{item}}</li>
    </ul>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            fruits:['apple','orange','aaa'],
            myFruits:[{
                cname:"苹果",
                ename:"apple"
            },{
                cname:"橙子",
                ename:"orange"
            },{
                cname:"AAA",
                ename:"aaa"
            }]
        }
    })
</script>

10. 计算属性

模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁

<div id="app">
    <input type="text" v-model="hello">
    {{changeHello}}
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"hello"
        },
        computed:{
            changeHello:function () {
                return this.hello.split("").reverse().join("");
            }
        }
    })
</script>

计算属性与方法的区别

• 计算属性是基于他们的依赖进行缓存的

• 方法不存在缓存