Vue整理01---模板语法

sean 发布于2019-08-23 18:01 / 2748人阅读

摘要：部分起始值步长增加减少输出结果部分这个例子用到了框的双向绑定。的打印结果大于结果小于动态改变背景图片

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个接收初始值，一个接收步长，两个按钮，一个增加一个减少，一行输出文字。

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动态改变背景图片

云服务器 GPU云服务器 php01 Beta01 java01++ database01

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104544.html

前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
almost最好的Vue + Typescript系列02 项目结构篇

摘要：源码文件夹，基本上我们的业务逻辑文件都应该放在这里定义了这个项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。基于vue-cli 3.x,配合typescript的环境构建的新vue项目,跟以前的结构相比,有了一些变化,下面我们来简单的了解一下基本结构: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

BicycleWarrior 2019-08-30 14:08 评论0 收藏0
almost最好的Vue + Typescript系列02 项目结构篇

摘要：源码文件夹，基本上我们的业务逻辑文件都应该放在这里定义了这个项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。基于vue-cli 3.x,配合typescript的环境构建的新vue项目,跟以前的结构相比,有了一些变化,下面我们来简单的了解一下基本结构: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

DTeam 2019-08-22 15:20 评论0 收藏0
almost最好的Vue + Typescript系列02 项目结构篇

摘要：源码文件夹，基本上我们的业务逻辑文件都应该放在这里定义了这个项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。基于vue-cli 3.x,配合typescript的环境构建的新vue项目,跟以前的结构相比,有了一些变化,下面我们来简单的了解一下基本结构: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

Clect 2019-08-01 18:41 评论0 收藏0