Vue整理01---模板语法

1.基础知识

1.new Vue 创建一个实例,传入一个对象。
2.对象包括:

el:作用域
data:所用到的数据
methods:所用到的函数

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

几个简单的例子:

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

Vue整理01---模板语法_第1张图片

html部分:

起始值 步长

输出结果:{{result}}

js部分

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

2.在上一个例子的基础上,如果resultPrint是一个函数,返回目前值是大于5还是小于5, 还有一个增加另一个变量的按钮2。

起始值 步长

输出结果:{{resultPrint()}}
sum2 is {{sum2}}

解析:如果resultPrint是一个函数的话,不管我点击按钮1还是按钮2,由于并不知道按钮2是否会影响到resultPrint的输出值,因此无论页面做什么操作,resultPrint都会渲染重新执行,如果resultPrint是一个计蒜属性的话,既可以解决普通属性无法加逻辑的局限,又可以避免写成一个函数的话不必要的执行。

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

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

你可能感兴趣的