Vue整理01---模板语法

时间 2019-11-07

标签 vue 整理模板语法繁體版

原文原文链接

1.基础知识

1.new Vue 建立一个实例，传入一个对象。
2.对象包括：html

el：做用域
data：所用到的数据
methods：所用到的函数

3.{{}} 数据绑定其中不止能够绑定data，也能够绑定函数(若是这个函数有返回值而且返回值是字符串之类的能够输出的东西)
4.{{}}大括号只能绑定内容，不能在html属性里使用，如：< a href={{}}} >,这是不行的
5.上面那个可使用 v-bind:href="link" --> 属性值的绑定,告诉html : 后面的数据是绑定的。
6.使用v-html绑定html标签而不是直接输出字符串，不过这样会形成跨站脚本攻击，不安全。安全

几个简单的例子：

1. 2个输入框，1个接收初始值，一个接收步长，两个按钮，一个增长一个减小，一行输出文字。

html部分：app

<div id="app">
            起始值<input v-model="start" />
            步长<input v-model="step" />
            <button v-on:click="increase">增长</button>
            <button v-on:click="decrease">减小</button>
            <br />
            <hr />
            <span>输出结果：{{result}} </span>
        </div>

js部分函数

<script>
        new Vue({
            el:'#app',
            data:{
                start:0,
                step:0,    
                result:0,
            },
            methods:{
                increase:function(){            
                    if(this.result==0){
                        this.result=parseInt(this.start);
                        this.result+=parseInt(this.step);
                    }else{
                        this.result+=parseInt(this.step);
                    }
                },
                    decrease:function(){            
                    if(this.result==0){
                        this.result=parseInt(this.start);
                        this.result-=parseInt(this.step);
                    }else{
                        this.result-=parseInt(this.step);
                    }
                },
                
            }
            
        
        })
    </script>

这个例子用到了：
1.v-model input框的双向绑定。
2.v-on:click 监听click事件，其余事件道理相似。this

2.在上一个例子的基础上，若是resultPrint是一个函数，返回目前值是大于5仍是小于5，还有一个增长另外一个变量的按钮2。

<div id="app">
            起始值<input v-model="start" />
            步长<input v-model="step" />
            <button v-on:click="increase">增长</button>
            <button v-on:click="decrease">减小</button>
            <button v-on:click="increase2">增长2</button>
            <br />
            <hr />
            <span>输出结果：{{resultPrint()}} </span>
            <br />
            <span>sum2 is {{sum2}}</span>
        </div>

<script>
        new Vue({
            el:'#app',
            data:{
                sum2:0,
                start:0,
                step:0,    
                result:0,
            },
            methods:{
                increase:function(){    
                    
                    if(this.result==0){
                        this.result=parseInt(this.start);
                        this.result+=parseInt(this.step);
                    }else{
                        this.result+=parseInt(this.step);
                    }
                },
                    decrease:function(){            
                    if(this.result==0){
                        this.result=parseInt(this.start);
                        this.result-=parseInt(this.step);
                    }else{
                        this.result-=parseInt(this.step);
                    }
                },
                increase2:function(){    
                    
                    this.sum2++;
                },
                resultPrint:function(){
                    console.log("resultPrint的打印")
                    return this.result>10? '结果大于10':'结果小于10'
                }
                
            }
            
        
        })
    </script>

解析：若是resultPrint是一个函数的话，无论我点击按钮1仍是按钮2，因为并不知道按钮2是否会影响到resultPrint的输出值，所以不管页面作什么操做，resultPrint都会渲染从新执行,若是resultPrint是一个计蒜属性的话，既能够解决普通属性没法加逻辑的局限，又能够避免写成一个函数的话没必要要的执行。spa

computed:{
                resultPrint:function(){
                    console.log("resultPrint的打印")
                    return this.result>10? '结果大于10':'结果小于10'
                }
            },

3.v-bind动态改变背景图片

<div id="app">
            <img v-bind:src="picUrl" v-on:click="changPic" />
        </div>