Vue第一天 : 模板语法&计算属性和监视

一 : 双大括号表达式

toUpperCase() 表示转换为大写

<div id="app">
    <h2>1.双大括号表达式</h2>
    <p>{{msg}}</p>	  <!--testContent-->
    <p>{{msg.toUpperCase()}}</p>   
    <p v-test="msg"></p>   	 <!--testContent-->
    <p v-html="msg"></p>   	 <!--innnerHTML-->
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            msg:'<a href="https://www.baidu.com>I Will Back!'
        }
</script>

二 : 强制数据绑定

v-bind: 强制绑定
:

<div id="app">
	<h2>2. 指令一:强制数据绑定</h2>
    <img src="imgUrl" alt="vue">
    <img v-bind:src="imgUrl">
    <img :src="imgUrl">
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            imgUrl:'https://cn.vuejs.org/images/logo.png'
        }
    })
</script>

三 : 绑定事件监听

v-on: 监听事件
@

<div id="app">
     <h2>3.指令二:绑定事件监听</h2>
    <button v-on:click="test">点击1</button>	  <!--test是一个实例-->
    <button @click="test2(msg)">点击2</button>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            msg:'<a href="https://www.baidu.com>I Will Back!</a>',
            imgUrl:'https://cn.vuejs.org/images/logo.png'
        },
        methods:{
            test(){				<!--test()实例-->
                alert('哈哈!')
            },
            test2(content){
                alert(content)
            }
        }
    })
</script>

四 : 计算属性

在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果

<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    姓名2(单向): <input type="text" placeholder="Full Name2"><br>
    姓名3(双向): <input type="text" placeholder="Full Name3"><br>
</div>

<script>
    new Vue({
        el:'#demo',
        data:{
            firstName:'A',
            lastName:'B',
            //fullName1:'A B'
        },
        computed:{
            // 什么时候执行: 初始化显示/相关的data属性数据发生改变
            fullName1(){    //计算属性中的一个方法,方法的返回值作为属性值
                console.log('fullName1()')
                return this.firstName + '' + this.lastName
            }
        }     
</script>

五 : 监视属性

通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化是, 回调函数自动调用, 在函数内部进行计算

<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
    姓名3(双向): <input type="text" placeholder="Full Name3"><br>
</div>

<script>
    const vm = new Vue({
        el:'#demo',
        data:{
            firstName:'A',
            lastName:'B',
            //fullName1:'A B'
            fullName2: 'A B'
        },
        computed:{
            // 什么时候执行: 初始化显示/相关的data属性数据发生改变
            fullName1(){  //计算属性中的一个方法,方法的返回值作为属性值
                console.log('fullName1()')
                return this.firstName + ' ' + this.lastName
            }
        },
        watch:{
            firstName:function(value){  //firstName 发生了改变
                console.log(this)  // 就是vm对象
                this.fullName2 = value + ' ' + this.lastName
            }
        }
    })
    
    vm.$watch('lastName', function(value){
        // 更新fullName2
        this.fullName2 = this.lastName + ' ' + value
    })
</script>