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个接收初始值,一个接收步长,两个按钮,一个增加一个减少,一行输出文字。
html部分:
<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事件,其他事件道理类似。
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是一个计蒜属性的话,既可以解决普通属性无法加逻辑的局限,又可以避免写成一个函数的话不必要的执行。
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>
<script>new Vue({el:'#app',data:{index:0,sum2:0,start:0,step:0, result:0,picUrl:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560069366&di=8b211d63775a606bf33b3a362b2b475d&src=http://hbimg.b0.upaiyun.com/54ebececeda0217648263cc944d6cfd413a17cdf2cc6-MGHS0y_fw658'},methods:{changPic:function(){if(this.index==0){this.picUrl='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1130583636,2033493811&fm=26&gp=0.jpg'this.index=1;}else{this.picUrl='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1560069366&di=8b211d63775a606bf33b3a362b2b475d&src=http://hbimg.b0.upaiyun.com/54ebececeda0217648263cc944d6cfd413a17cdf2cc6-MGHS0y_fw658'this.index=0;}}}})</script>
转载于:https://www.cnblogs.com/CszShuzi/p/11056874.html
vue学习01--模板语法相关推荐
- vue.js 01 模板语法
文章目录 vue插值 vue指令 vue插值 代码: <!DOCTYPE html> <html lang="en"> <head><me ...
- Vue官网学习(模板语法:一、{{}}双大括号语法)
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析 ...
- image是否有disabled属性_Vue学习笔记 模板语法、计算属性
点击上方"蓝字"关注我们吧! vue学习笔记 官网:https://cn.vuejs.org/v2/guide/ 1.vue体验 demo示例: image.png 示例代码: & ...
- VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础 安装 CDN 下载 安装 命令行工具(CLI脚手 ...
- Vue 第一天:模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
- 【猿说VUE】初试模板语法,开启VUE编码之旅
模板语法 官网描述: Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的 ...
- vue3学习(模板语法)
创建一个vue项目 1.先在vs code终端输入vue create 项目名 2.选择Manually select features(手动选择选项),按enter确定 3.选择Babel(java ...
- 微信小程序学习day01-WXML 模板语法
目录 WXML 模板语法 - 数据绑定: 1.数据绑定的基本原则 2. 在 data 中定义页面的数据 3. Mustache 语法的格式 4. Mustache 语法的应用场景 5. 动态绑定内容 ...
- VUE中的模板语法以及过滤器和双向数据绑定
目录: 1. 模板语法 1.1 插值 1.1.1 文本 1.1.2 html 1.1.3 属性 1.1.4 表达式 1.2 指令 1.2.1 核心指令 1.2.1.1 v-if |v-else-if| ...
- 【Vue学习】基础语法(五)
九.组件化高级 1.插槽slot 作用:让封装的组件更加具有扩展性,使用者可以决定组件内部的一些展示内容. 1.1 插槽的基本使用 可设置默认值button 如果有多个值,同时放入到组件进行替换时,会 ...
最新文章
- SHAREPOINT爬网设置
- icmp的回送和回送响应消息_领导送我1盒茶叶,我悟出了3点道理,可能还有一群人不明白...
- C++日志系统log4cxx使用总结
- UU看书于今日成功上线,各大小说网站发来贺电!!
- Windows 10 LTSB 还原默认照片查看器
- Elasticsearch集群配置以及REST API使用
- vue php 加载速度,Vue加载优化,速度提高一倍。
- Python--网络编程
- Segment Advisor
- Intellij_idea-15 常用快捷键
- Entity Framework第三篇IQueryable和list本地集合
- tensorflow 安装_安装tensorflow-gpu 2.0
- java数字后面加f_java 数字后面 f 和 l
- 预定义类型未定义或导入_探索类型系统的底层 - 自己实现一个 TypeScript
- BSOD Diagnostics
- 工具模板 | 用APOEM方法消除对用户行为的偏见
- 中通hadoop去CDH的实践之路
- 移动端app跳转百度地图
- 任正非《一江春水向东流》读后感
- 小程序 mina_如何使用Mina自动将应用程序部署到阿里巴巴ECS
热门文章
- 2020牛客国庆集训派对day3 I.Rooted Tree(哈代-拉马努金拆分数列)
- 盘点团队在线帮助文档怎么做?
- 现代计算机的内存储器由,内存储器包括哪些
- Python3 读取中文文件txt编码问题
- 窥探比特联储(UBTC)的发展前景
- matlab plot作图线型及颜色及图标大全
- SubversionEdge安装及ldap接入
- ⑭【动态时空图卷积网络 · 注意力 · 交通速度预测】时空依赖关系挖掘 | 动态时空建模 | 智能交通系统 |
- 什么才是“Google式”设计?
- shiny 服务器未响应,R Shiny服务器无法呈现正确的ggplot字体系列