Vue.js 第1章 Vue常用指令学习
今日目标
能够写出第一个vue应用程序
能够接受为什么需要学vue
能够使用指令
能够通过指定完成简单的业务(增加删除查询)
能够理解mvvm
为什么要学习vue
企业需要
可以提高开发效率
实现vue中的 HelloWorld
让一个变量的内容能够在页面中展示
目标
如何引入vue.js文件
如何创建vue对象
如何定义vue中的数据成员
如何定义模板
如何让数据和模板进行关联
通过这个案例可以创建一个简单的Vue页面
实现过程
引入js
<!-- 1.引入vue.js文件 --> <script src="./js/vue2.js"></script>
创建vm实例
var vm = new Vue()
定义vm实例的成员
var vm = new Vue({// 5.指定当前Vue实例所对象的模板。通过el指定。这个el名字不能改哦el:'#app',// 3.定义数据成员-属性--名称只能是data// data是一个对象,里面可以存储任意类型的数据 data:{msg:'HelloWorld',age:20}})
创建模板
<div id='app'></div>
添加插值表达式用于展示指定名称的数据
<!-- 6.使用插值表达式展示指定的数据 --> {{msg}}
能够理解mvvm
目标:能够明白vue是如何工作的
m:model:数据模型
v:view:视图--模板
vm:vue实例:实现数据和模板的关联
####常见报错:
Property or method "msg" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option 当前vm实例中,属性或方法没有定义,但是在渲染的时候你却需要使用:确保这个成员或者属性你已经定义了。
Error compiling template 一定是模板写错了,不符合模板的语法
[Vue warn]: Error compiling template:<div id="app"><a href="">{{msg}}</a><span v-text="{{msg}}"></span> </div>- invalid expression: v-text="{{msg}}" 说明{{}}表达式不能通过指令的方式来使用
<p v-model="msg">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component. 当前p元素不支持v-model,你应该换成input select textarea
能够使用指令
目标:
明白什么是指令
知道指定如何使用
知道不同的指令有什么样的功能,主要用在什么样的场景
#####插值表达式:{{}}
它到底有那些使用场景
它到底能怎么用
作用:可以实现 内容的替换:使用指定的成员值替换插值表达式
特点:
双大括号:{{}}
只能写在标签之间--双标签
这个值必须先定义好
其它常见的使用方式:
可以写表达式
可以实现实现运算
实现添加三元表达式
不能直接添加js逻辑结构
v-text
指令就相当于之前html标签的属性 <标签 属性=‘值’>,它的使用方式和属性基本一致 <标签 指令=‘值’>
目标:
作用:相当于{{}},可以在标签之间添加数据 指定=“data中定义的成员”
什么场景使用:不想使用{{}},也可以使用v-text
v-html
目标:
明确v-html和v-text的区别
v-text会将内容原样输出,不解析不编译
v-html会将内容按html语法进行解析之后再输出解析的结果
使用场景
当你需要将数据进行html语法解析的时候使用
v-bind
目标
作用:可以实现网页标签属性值的动态绑定:这个标签的属性值是动态变化的。再说折一点:我想为标签的属性值绑定一个变量
使用场景:当标签的属性值是动态变化的时候变需要使用v-bind
如何使用
<标签 v-bind:属性=“值">
值可以是Data中定义的变量。值必须先定义好
简写:
动态绑定样式
动态设置样式变量
<div id="app"><div :class="{box:isCollopse}"></div><button @click='isCollopse = !isCollopse'>展开和合并</button><p :class="[hasRed,hasunder]">这是p元素</p><p :style="{ fontSize: size + 'px' }">没写字</p> </div>
v-for
目标:
作用:实现循环,可以循环遍历数组或对象
使用场景 :动态渲染
如何使用:你想循环遍历生成谁,就在谁的结构中添加v-for
遍历数组:v-for="(value,index) in arr"
value:数组中的值
index:值所对应的索引
如果需要两个值就应该使用()包含,如果只需要其中一个值没有必要使用()包含,但是无论如何第一个值永远是value
遍历对象:v-for="(value,key,index) in obj"
value:数据对象的值
key:数据对象的键
index:数据对象的索引
示例
<tbody><tr v-for="value in stuList"><td>{{value.id}}</td><td>{{value.name}}</td><td>{{value.age}}</td></tr><!-- <tr v-for="value in stuList"><td v-for="(v,key) in value">{{v+":"+key}}</td></tr> --> </tbody>
v-model
作用:实现双向数据绑定:你修改数据,页面中有相应的变化,修改页面中的数据,数据源数据有相应的变化
如何使用:v-model='值'
使用场景 :有限制:只有input,select,textarea可以来实现v-model
将来你想收集用户数据的时候就可以使用v-model来实现
<div id="app"><!-- <input type="text" :value="msg"> -->用户名:<input type="text" v-model='username'> <br>密码:<input type="password" v-model='userpass'> <br><button @click='login'>登陆</button> </div>
v-on
作用:绑定事件监听器:说白了就是为元素绑定事件
如何使用
语法:<元素 v-on:事件名称=‘事件处理函数’>
一般这种自定义的事件的处理函数都会写在methods属性中(属性》》对象)
建议使用简写:<元素 @事件名称=‘事件处理函数’>
细节:
有关参数传递的细节
如果没有传递参数,就默认传递$event
如果手动传递了参数,那么$event就需要手动传递
修饰符:可以在绑定事件后添加设置,让事件能够产生某个行为
@click.修饰符=‘事件处理函数’
常用修饰:.stop(阻止事件冒泡):prevent(阻止默认行为)
键修饰符:一般是针对于输入框而言
<input type="text" @keyup.enter='dodo' v-model='myname'> <input type="text" @keyup.13='dodo' v-model='myname'>
v-if 和v-show
目标:
作用:
v-if可以根据值来决定这个元素是否需要渲染(说白了就是页面中是否有这个元素的dom结构)
v-show可以根据值来决定这个元素的display样式的值(none,block)
使用方式:
v-if='bool值|表达式'
v-show='bool值|表达式'
区别:
v-if:通过是否渲染元素来决定元素是显示还是不显示
v-show是通过控制元素的display样式的值来决定元素显示还是隐藏
使用场景
v-if:用户提示,它会反复的渲染元素,如果频繁的实现元素的显示和隐藏,不建议使用v-if,它会频繁的渲染页面的结构,造成渲染负担--异步操作一般考虑使用v-if
v-show:当元素频繁的进行显示和隐藏的时候就应该使用v-show,因为它并没有真正的销毁这个元素,可以节省创建元素的时间
v-if v-else v-else-if
作用:分支判断
细节: v-else v-else-if不能单独存储,必须先有v-if
使用方式:
<div id="app"><input type="text" v-model='score'><p v-if="score>=90">A</p><p v-else-if="score>=80">B</p><p v-else-if="score>=70">C</p><p v-else-if="score>=60">D</p><p v-else>E</p> </div>
v-cloak
作用:可以隐藏元素的显示,直到你认为可以显示了才会出现。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
使用方式:
添加一个指定的样式
<style> [v-cloak] {display: none; } </style>
- 在元素中添加这个指令
<p v-cloak>{{msg}}</p>
应用场景:元素如果还没有解析完毕,不应该出现在页面中
案例
目标:能够使用之前所讲的指令,并且能够熟悉这些的指令的使用场景
<!DOCTYPE html> <html lang="en"><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>#app {width: 600px;margin: 10px auto;}.tb {border-collapse: collapse;width: 100%;}.tb th {background-color: #0094ff;color: white;}.tb td,.tb th {padding: 5px;border: 1px solid black;text-align: center;}.add {padding: 5px;border: 1px solid black;margin-bottom: 10px;}</style><script src="./js/vue.js"></script> </head><body><div id="app"><div class="add">编号:<input v-model="proId" type="text"> 品牌名称:<input v-model="name" type="text"><input @click="addProduct" type="button" value="添加"></div><div class="add">品牌名称:<input type="text" placeholder="请输入搜索条件"></div><div><table class="tb"><thead><tr><th>编号</th><th>品牌名称</th><th>创立时间</th><th>操作</th></tr></thead><tbody><tr v-for="(value,index) in productList"><td>{{value.id}}</td><td>{{value.proName}}</td><td>{{value.created}}</td><td><a @click.prevent="delProduct" href="#">删除</a></td></tr></tbody></table></div> </div><script>var vm = new Vue({el: '#app',data: {proId: '',name: '',productList: [{ id: "1", proName: "中华", created: new Date() },{ id: "2", proName: "中华2", created: new Date() },{ id: "3", proName: "中华3", created: new Date() },{ id: "4", proName: "中华4", created: new Date() },{ id: "5", proName: "中华5", created: new Date() }]},methods: {addProduct(){var obj = {id:this.proId,proName:this.name,created:new Date()}this.productList.push(obj)},delProduct(){this.productList.splice(0,1);}}})</script> </body></html>
转载于:https://www.cnblogs.com/replaceroot/p/11014075.html
Vue.js 第1章 Vue常用指令学习相关推荐
- 遇见 vue.js --------阿文的vue.js学习笔记(4)------模板语法
** 新学习新征程,我们一起踏上学习 vue.js的新长征 遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...
- 遇见 vue.js --------阿文的vue.js学习笔记(8 —1)------- 列表渲染
** 新学习新征程,我们一起踏上学习 vue.js的新长征 遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...
- Vue.js服务器端渲染与Vue路由器:分步指南
当我开始使用Vue收集有关SSR(服务器端渲染)的信息时,我必须从不同的文章以及官方文档中获取相关信息,以便全面了解这个主题. 以下是我在这些来源中发现的一些问题: 很多关于你应该拥有的信息的假设,比 ...
- Vue.js 源码分析(二十三) 指令篇 v-show指令详解
v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...
- Vue.js构建用户界面的渐进式框架(前端学习笔记1.0)
文章目录 前言 一.Vue是什么? 二.前端核心分析 1.1.概述 1.2.前端三要素 1.3.结构层(HTML) 1.4.表现层(CSS) 1.5.行为层(JavaScript) 二.前端发展史 2 ...
- 覆盖vue.js样式_使用Vue.js和Cloudinary在化身上覆盖眼镜/面罩
覆盖vue.js样式 Deep Learning, a subset of machine learning, helps break down tasks in ways that makes al ...
- vue.js毕业设计,基于vue.js前后端分离教室预约小程序系统设计与实现
功能介绍 [后台管理功能模块] 系统设置:设置关于我们.联系我们.加入我们.法律声明 广告管理:设置小程序首页轮播图广告和链接 留言列表:所有用户留言信息列表,支持删除 会员列表:查看所有注册会员信息 ...
- vue.js 事件的案例以及 v-model 的学习
这个是事件监听的一个小案例. <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
- vue.js毕业设计,基于vue.js前后端分离教室预约系统(H5移动项目) 开题报告
毕业论文 基于Vue.js的教室预约系统(H5) 开题报告 学 院: 专 业: 年 级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书 姓 ...
最新文章
- 小马智行获2.67亿美元新融资,估值超53亿美元
- 原来你是这样子的OpenAI!来看看它背后那些有趣的人和事
- Linux内核初始化阶段内存管理的几种阶段
- 开源图形化SFTP客户端winscp入门
- 粤港澳大湾区菜篮子-哲商对话·林裕豪:从玉农业谋定大健康
- C语言高级编程:数组指针与数组
- MATLAB 与 Excel 接口
- 最长无重复字符子串?
- 老码农:如何写出让自己满意的代码
- 2018年第41周-sparkSql搭建及配置
- 实时媒体AI,打破内容创作天花板,加速视频创新
- Python collections的使用
- LeetCode 5381. 查询带键的排列
- Grunt构建工具能做哪些事?
- python给女朋友_【转】python实战——教你用微信每天给女朋友说晚安
- RandomAccessFile 随机存取文件任意位置数据
- 《秘密》之你的秘密和生命的秘密
- GROMACS Tutorial 2-Membrane Protein: KALP15 in DPPC
- html网页早发白帝城,唐.李白《早发白帝城》(快乐写字)
- Win10 制作Ubuntu U盘启动盘