学习Vue.js Day2

基本语法

v-cloak 暂时遮蔽JS还未加载创建时的源码

    <div id="app" v-cloak></div>

v-once 使用一次不会随着改变

    <p v-once>{{message}}</p>
    <p>{{message}}</p>

v-html 解析服务器返回的如果是标签形式

    <p v-html="url"></p>

v-text 比较少用，因为不灵活

    <p v-text="text"></p>

v-pre 显示没有解析的数据

    <p v-pre>{{message}}</p>

动态决定属性 v-bind 语法糖使用‘：’

    <img v-bind:src="imgURL" alt="" >
    <a :href="aHref">百度一下</a>

动态绑定样式时使用

{类名： Boolean，}对象语法

另外一种是

数组语法[类名，类名]

    <h2 :class="{active:isActive, line: isLine}">{{ message + name }}</h2>
    <h2 :class="getClass()">{{ message + name }}</h2>
    <button v-on:click="btnClick">改变颜色</button>
    <h2>{{count * 2}}</h2>

style对象语法

  <h2 :style="{fontSize:'20px'}">{{message}}</h2>
  <h2 :style="{fontSize: finalSize+ 'px', color: finalColor}">{{message}}</h2>

style数组语法

<h2 :style="[baseStyle,]">{{message}}</h2>

计算属性 把他当成属性，处理数据

<h2>{{fullName}}</h2>
 const app = new Vue({
        el:'#app',
        data:{
           message:'你好吗',
           name:'Kobe',
           firstName: 'Lebanon ',
           lastName: 'James',
           finalSize: 16,
           finalColor:'red',
           baseStyle:{background:'red'},
           count: 200,
           imgURL:'https://cn.vuejs.org/images/logo.png',
           url: '<a href="https://www.baidu.com">百度一下</a>',
           aHref: 'https://www.baidu.com',
           text: '你是谁',
           isActive: true,
           isLine: true,
        },
        methods:{
            btnClick: function () {
                this.isActive = !this.isActive
            },
            getClass: function () {
                return {active: this.isActive, line: this.isLine}
            }
        }
        computed:{
            fullName: function () {
                return this.firstName+this.lastName
            }
            fullName:{
            // 计算属性 一般没有set方法,只读属性
            //    get:function () {
            //        return this.firstName+this.lastName
            //     }
            // }
        }
    })

computed 和 methods 的区别

computed 只需执行一次，会产生缓存

而 method 每次都需要重新调用

ES6 基础语法

ES5之前因为 if 和 for 都没有块级作用域的概念，所以在很多时候，我们都需要借助于funcion的作用域来解决应用外面变量的问题

ES6中加入了let

块级作用域 let

而 var 没有块级作用域

    var func;
    if(true){
        var name = 'why'
        func = function(){
            console.log(name)
        }
    }
    func()

    var btns = document.getElementsByTagName('button')
    for(var i=0;i<btns.length;i++){
        btns[i].addEventListener('click', function(){
            console.log('第'+i+'个按钮被点击')
        })
    }
    //结果发现一直都是打印出来的文字最后一个按钮被点击
    //因为它引用的是 var i 当前的值
    //使用闭包
    for(var i=0;i<btns.length;i++){
        (function(i){
            btns[i].addEventListener('click', function(){
            console.log('第'+i+'个按钮被点击')
            })
        })(i)
    }
    //为什么用闭包可以解决var作用域的问题，因为函数是一个作用域，值给它之后不受外界的影响
    for(let i=0;i<btns.length;i++){
        btns[i].addEventListener('click', function(){
            console.log('第'+i+'个按钮被点击')
        })
    }
    //用 let 就正常了！

为什么用闭包可以解决var作用域的问题，因为函数是一个作用域，值给它之后不受外界的影响