引用Vue

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

let vm = new Vue({
    el: '#app',//挂载元素
    data: {
        msg: 'hello world',
    }
})

<div id="app">{{msg}}</div>

v-for

v-for循环数组

v-for="item of arr"

<div id="app">
     <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul> 
</div>

 let vm = new Vue({
    el: '#app',
    data: {
        arr: [1,2,3,4],
    }
})
//追加内容
vm.arr.push(5)

v-for循环对象

v-for="(key,value) of obj"

<div id="app">
    <p v-for="(value,key) in list">{{key}}:{{value}}</p>
</div>

修改数组数组 Vue.set()方法:修改数组值第一个参数：修改的数组第二个参数：数组索引下标第三个参数：修改内容

let vm = new Vue({
    el: '#app',
    data: {
       list:{
           name: 'xiaoming',
           age: '20',
           height: '170cm'
       }
    }
})

<div id="app">
    <ul>
    <!--item为数组中的每一项-->
        <li v-for="(item,index) in list">{{item.name}}:{{item.age}}
        <!--index为数组索引-->
            <p>{{index}}</p>
        </li>
    </ul>
</div>

let vm = new Vue({
    el: '#app',
    data: {
       list:[
            {
                name: 'xiaoming',
                age: '20',
                    height: '170cm'
            },
            {
                name:'xiaohong',
                age: '18',
                height: '169cm' 
            },
            {
                name:'xxx',
                age:'16',
                height: '165cm'
            }
        ]
    }
})

v-text&v-html

{{}} : 插入文本

v-text: 插入文本

v-html: 插入一段html代码

<div id="app">
    <p>{{msg}}</p>
    <p v-text="msg"></p>
    <p v-html="msg"></p>
    <p>{{inner}}</p>
    <p v-text="inner"></p>
    <p v-html="inner"></p>
</div>

let vm = new Vue({
    el: '#app',
    data: {
       msg: 'hello world',
       inner: '<a href="#">百度一下</a>'
    }
})

绑定事件

v-on: 事件绑定

<div id="app">
  <div id="btn">{{number}}</div>
  <button  v-on:click="add">点击</button>
</div>

let vm = new Vue({
    el: '#app',
    data: {
     number: 0,
    },
    //事件方法
    //$event 事件对象
    methods: {
        add($event){
            console.log($event)
            console.log(this.number)
            this.number++
        }
    }
})

@click => v-on:click

<div id="app">
  <div id="btn">{{number}}</div>
  <button  @click="add">点击</button>
</div>

v-model

v-model: 绑定在表单元素

<div  id="app">
    <input type="text" v-model="msg">
    <input type="radio" v-model="sex" value="boy">男
    <input type="radio" v-model="sex" value="girl">女
    <input type="checkbox" v-model="friut" value="apple">苹果
    <input type="checkbox" v-model="friut" value="banana">香蕉
    <input type="checkbox" v-model="friut" value="orange">桔子
</div>

 let vm = new Vue({
    el:'#app',
    data:{
        msg:'12345'
        sex:'boy',
        friut: ['apple','orange']
    }
})

v-bind

v-bind : 绑定属性

v-bind:class 等价于 :class

<div  id="app">
    <span v-bind:class="spanStyle">111111</span>
</div>

 .wrapper{
    background: red;
    color: #ffffff;
}

 let vm = new Vue({
        el:'#app',
        data:{
            spanStyle: 'wrapper'
        }
})

v-if &v-show

v-if

v-else

v-else-if

<div  id="app">
    <p v-if="isLog">你好,xxx</p>
    <p v-else>请登录</p>
</div>

let vm = new Vue({
    el:'#app',
    data:{
        isLog: true
    }
})

<div  id="app">
    <p v-if="tag == 1">1</p>
    <p v-else-if="tag == 2">2</p>
    <p v-else>3</p>
</div>

  let vm = new Vue({
    el:'#app',
    data:{
        tag: 1
    }
})

v-show

<div  id="app">
    <p v-show="isHello">hello world</p>
</div>

let vm = new Vue({
    el:'#app',
    data:{
        isHello: true
    }
})

区别

v-if 如果不满足条件不会生成html结构

v-show 会生成html结构隐藏或显示

computed

计算属性

 <div  id="app">
    <p>{{add()}}</p>
    <p>{{sum}}</p>
</div>

let vm = new Vue({
    el:'#app',
    data:{
        a:1,
        b:2
    },
    //计算属性
    computed: {
        //计算属性执行一次后 结果会缓存，再次调用不会执行，除非结果改变
        sum(){
            return this.a + this.b
        }
    },
    methods: {
    //求和函数 每调用一次就会执行一次
        add(){
            return this.a + this.b
        }
    }
})

计算属性的结果会被缓存

watch

let vm = new Vue({
    el:'#app',
    data:{
        a:1,
        b:2
    },
    //实时监听属性变化
    watch: {
        a:function(val1,val2){
            console.log(newVal,oldVal)
        }
    }
})

Vue(一)