Vue学习心得记录之模板语法
下面是我这半年以来总结的Vue学习笔记,帮助自己复习学习Vue的基本用法。有需要的同志可以参考下。
Vue的模板语法
Vue有很简单的模板语法,这些Vue指令用来响应式改变渲染DOM可以快速入门上手这个简单的框架。
1.{{}}单向插值表达式,可以把数据从控制器绑定到视图模型
var my = new Vue({el: '#app',,template: `<div>{{myName}}`,data() {return { myName: 'hello vue!',}},})
data选项就代表着控制器中的数据信息。
2.属性绑定 v-bind: 缩写为:
template:`<div v-bind:title="myName">hover here</div>`
3.v-if与v-show
两者后面都是跟boolean
类型变量,v-if会直接在dom结构移除该dom元素,v-show只是加了一个行内样式dislplay:none;
该元素还是存在的。
在data属性中声明初始化需要的变量后在模板中渲染。
data() {return {myName: 'hello vue!',isShow: false,}},`<div v-if="isShow" >show me </div><hr><span v-show="isShow">show me</span>`
4.v-for="item in arrOrObject"循环某个DOM.被循环的数据可以是对象也可以是数组item 也可以写作(item ,index)这样就会把对象中的key或者数组中的索引index取出来
注意模板必须只能包含一个根节点
template:
<div></div><div></div>
//写法错误
<ul><li v-for="item in arr">loop {{item}}</li></ul>
5.事件绑定v-on
缩写@
在methods:{}
定义方法
然后就可以在模板中调用
methods: {reverse() {//console.log(this.message)this.message = this.message.split(' ').reverse().join(' ')}},<button v-on:click="reverse">消息逆转</button><p>{{message}}</p>
6.表单双向绑定
我们可以采用事件绑定的方式间接实现。即定义表单中的keyup事件回调方法,然后在方法中获取到value值,然后赋值给data上的数据
还可以采用v-model快捷实现方法
<input type="text" v-model="input">
这本质上就是上一种方法的语法糖。
7.Vue类的data属性必须定义一个函数然后返回一个对象,如果直接使用对象对于数组等的引用赋值就会使得改变了数据值会影响别的地方对它的引用。定义成一个函数返回这样就是把所有的数据复制了一份,不会产生引用赋值的危害。
data() {return {message: "this is a boy",myName: 'hello vue!',time: new Date(),isShow: false,input: 'liyu',arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],}},
8.全局子组件的注册与属性传递
Vue.component('child', {props: ['title'],template: `<div> <hr><h3>{{title}}</h3><p>我是个全局子组件</p></div>`
})
用
props:[' ']
这种数据格式来定义接受的属性名称
这样在调用child时候就可以传递属性进去
<child :title="input"/>
今天的笔记学习心得就记录到这里吧!第一次用SegmentFault顺利!
Vue学习心得记录之模板语法相关推荐
- VUE 学习代码 监视和 模板语法回调函数
文章目录 HelloWorld 模板语法 03_计算属性和监视 HelloWorld <!DOCTYPE html> <html lang="en"> &l ...
- 好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
- Vue入门(一)—— 模板语法
Vue.js 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合. 什么是渐进 ...
- vue加载时闪现模板语法-处理方法
问题:使用VUE时,页面加载瞬间,会闪现模板语法,例如{{ item.name }}等 解决办法: 1.可以通过VUE内置的指令v-cloak解决这个问题(推荐) 具体实现: <ul v-clo ...
- Django 2.0 学习(12):Django 模板语法
Django 模板语法 一.模板 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法 模板语法变量:{{ }} 在Django模板中遍历复杂数据结构的关键是句点字 ...
- Vue3零基础学习指南之Vue基础(1)— 模板语法与指令
目录 概述 安装 实例化 文本渲染(v-text.v-html) 属性渲染(v-bind) 条件渲染(v-if.v-else-if.v-else) 列表渲染指令(v-for) 遍历数组 遍历对象 范围 ...
- Vue学习心得(1)
Vue 的安装方式 下载使用(两种方式) 1.直接下载并用script标签引入,Vue 会被注册为一个全局变量,平时对于 Dom 操作比较频繁的小项目可以直接这样使用. 2.Vue.js 提供一个官方 ...
- 嵌入式代码学习心得记录
一.C语言学习心得记录 函数递归 编写顺序 终结条件 输入下一级递归参数,调用下一级递归函数. 当前递归函数的操作代码,在下一级递归函数执行完成后执行的操作代码. #include <stdio ...
- LNA设计学习心得记录----MOS管的选取
本文参考相关书籍,仅供学习LNA的过程记录. 在设计LNA之前,要选取合适的MOS管,要对MOS管进行分析 在确定工艺之后,主要仿真两个方面,一个是Vgs对于NFmin,Gmax,二是栅宽对NFmin ...
最新文章
- hbase 数据插入指定rowkey_「HBase大爆炸」HBase之常用Shell命令
- gis怎么改鼠标滚轮缩放_ArcGIS鼠标滚轮方向之代码篇
- Apollo升级系统 --- 使用说明
- LeetCode Simplify Path(栈操作)
- 基于Vue的WebApp项目开发(四)
- 变压器的同名端,以及判别方法
- java编码转换报错_Java中BeanUtils的日期转换 代码报错 怎么解决
- python 单位根检验代码_python时间序列分析
- 全球最快!湖南大学天河超算存储系统!
- 2020华为软挑总结——baseline
- 淘客app开发成本要多少
- 什么是单页网站设计?受欢迎的原因在哪?
- html字体铺盖颜色,买被子也是有讲究的?这几种颜色的被子,再好看都别往卧室放!...
- 定制化和极简主义风格的安卓,看你pick谁?
- 数据库删除字段指定字符前面或者后面的字符串
- Java创建二维三维数组的几种方式
- 【免费开放源码】审批类小程序项目实战(活动申请页面)
- 这7点不去做外汇交易难爆仓
- MySQL中如何插入反斜杠
- php百度登录完整代码_百度熊掌号专业问答PHP方式推送完整代码(附说明)
热门文章
- 蓝桥杯第八届省赛JAVA真题----油漆面积
- 由于没有远程桌面授权服务器可以提供许可证,远程会话被中断
- python中如何将字典直接变成二维数组_python基础知识(列表、字典、二维数组)...
- python卸载_删除系统 Python 引发的惨案
- java中子线程与主线程通信_Android笔记(三十二) Android中线程之间的通信(四)主线程给子线程发送消息...
- process 类 java_编写可执行jar——java的Process类的使用(二)
- mysql 1786_mysql错误处理之ERROR 1786 (HY000)
- 深入理解java虚拟机 (二) 第二版
- springcloud 服务降级
- springcloud服务注册中心eureka搭建