vue基础(1):vue的使用步骤及常用指令
2020-02-02 13:51
1106 查看
一.Vue的使用步骤
1.引包 ①在html文件中引入script标签,指定文件 <script type="javascript/text" src="../js/vue.js"></script> ②留坑,留一个vue模板插入的地方,或者是vue代码生效的地方 <div id="app">(坑位)</div> ③实例化vue 启动vue <script type="javascript/text"> new Vue({ el:"#app", template:` //需要向坑位中添加的标签及其内容 .... `, data:function(){ return{ ..... //定义在标签中使用的变量 } } }) </script> el:目的地信息,对应留坑的坑位,可以通过id名、类名、标签名来查找 template:存放在坑位中需要添加的内容 数据:data 值为函数的形式也可以是对象,但是都是用函数,因为函数最后也是return一个对象 注意:a.template内的内容是tab键上的波浪线键,可以自动识别换行等操作 b.data内return的值的语法应为 属性:值,例如: return{ num:1 } c.Vue的每个属性之间使用','(逗号)隔开 2.插值表达式 插值表达式内填入data里面的变量即可在页面获取到变量的值 例如{{data里的任意变量}}浏览器会自动将双大括号内的值进行解析
二.Vue中常用的指令
1.指令的概念与语法 在vue中提供一些对页面和数据的更为方便的操作,这些操作就叫做指令。在Vue中,指令的语法格式为: <div v-xxx=''></div> 2.常用的指令 ①v-text:向标签内插入文本信息 不解析标签信息 ②v-html:向标签内插入并解析文本信息 用法举例: new Vue({ ...., template:` <div> <div v-text='mytext'></div> <div v-html='myhtml'></div> </div> `, data:function(){ return{ mytext:'<h1>检测标签是否被识别</h1>', myhtml:'<h1>检测标签是否被识别</h1>' } } }) 在上述用法中,带有mytext的div中,浏览器认为<h1></h1>标签是字符串'<h1></h1>';而在带有myhtml的div中, 浏览器会解析其中的标签<h1></h1> ③v-if:v-if 后接的表达式应为条件表达式,并且使用单引号引起来。 例如:<div v-if='num==1'>测试v-if</div> Vue会在data中找到v-if所需要的条件,并根据条件表达式的返回值判断,如果为false,则 不显示标签内的内容。 也可以在v-if内存放变量: <div v-if='checkvif'></div> 在data内对checkvif进行条件判断。如果表达式为真,则标签内的内容显示;如果表达式的内容不为真,则不显示标签内容。 ④v-else-if、v-else 一般都与v-if联立使用。注意:v-else后不需要接具体的表达式。 ⑥v-show :作用和v-if很相似,都是可以通过条件判断表达式来控制标签内部,两者的区别是控制不同的css属性对标签内部的内容进行 隐藏。两者的区别请自行百度。 ⑦v-for: 这个标签的作用是对data中定义的数组、对象进行循环遍历。具体示例如下: new Vue({ ...., template:` <div> <div v-for='(item,index) in forArray'> 数组的元素是:{{item}},当前序号是:{{index}} </div> <div v-for='(value,key) in forObject'> 对象的key是:{{key}},value是:{{value}} </div> </div> `, data:function(){ return{ forArray:[1,2,3,4,5], forObject:{'name':'123','age':13} } } }) 对象采用的是Json格式进行书写。数组和对象的循环语法为: v-for='(记录当前值的记录器,下标/key) in 数组名/对象名'。
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第1节 Scanner类_1-API概述和使用步骤...
- 【Vue.js】- Vue.js常用指令的使用
- vue常用指令v-bind的使用总结
- 【Vue】零基础学习Vue: 第17课 Vue的v-bind指令使用与设置及改变标签样式
- vue的基础之指令的使用
- 【Mysql】常用操作指令与管理和使用数据库步骤
- Vue.js基础_常用指令和自定义指令
- vue.js入门(一)创建vue对象和常用指令及使用示例
- 又一款MVVM组件 Vue基础语法和常用指令(1)
- Vue.js常用指令的使用小结
- Vue.js常用指令之循环使用v-for指令教程
- Vue学习1-1.基础语法;2.指令:表单输入绑定,文本渲染;3.组件:定义组件,使用组件
- vue.js的安装应用及基础常用指令
- Vue的基础认知一---构建环境/v指令的使用
- 又一款MVVM组件 Vue基础语法和常用指令(1)
- 使用vue做前端开发时涉及到npm的一些常用指令
- iOS -- git的常用命令,使用步骤
- Freemarker常用指令使用示例
- DedeCMS基础使用(3):文章页 及 频道封面页 常用标签
- 我自己使用github上传小demo的常用步骤