苏南网站建设,后台管理系统登录,民权县住房和城乡建设局网站,苏州制作网站的有几家Vue2之基础介绍和指令与过滤器一、简介1、概念2、vue的两个特性2.1 数据驱动视图2.2 双向数据绑定3、MVVM二、vue基础用法1、导入vue.js的script脚本文件2、在页面中声明一个将要被vue所控制的DOM区域3、创建vm实例对象#xff08;vue实例对象#xff09;4、样例完整代码三、…
Vue2之基础介绍和指令与过滤器一、简介1、概念2、vue的两个特性2.1 数据驱动视图2.2 双向数据绑定3、MVVM二、vue基础用法1、导入vue.js的script脚本文件2、在页面中声明一个将要被vue所控制的DOM区域3、创建vm实例对象vue实例对象4、样例完整代码三、指令与过滤器1、指令的概念2、六大类指令3、内容渲染指令3.1 介绍3.2 三个种类3.3 v-text3.4 插值表达式3.5 v-html3.6 完整代码4、v-bind 属性绑定指令4.1 v-bind4.2 完整代码5、在插值和属性绑定中编写JS语句5.1 用插值表达式计算5.2 操作插值表达式的内容5.3 动态拼接内容5.4 完整代码6、v-on 事件绑定指令6.1 v-on介绍6.2 函数的简写形式6.3 完整代码6.4 通过this访问数据源中的数据6.5 v-on的简写形式6.6 $event6.7 注意7、click 事件修饰符7.1 介绍7.2 示例代码7.3 完整代码8、keyup 按键修饰符8.1 介绍8.2 示例代码8.3 完整代码9、v-model 双向数据绑定9.1 双向数据绑定指令9.2 适用环境9.3 相关代码9.4 完整代码10、v-model 指令修饰符10.1 三种修饰符10.2 完整代码11、条件渲染指令11.1 介绍11.2 两种渲染指令11.3 完整代码11.4 注意12、v-if 配套指令12.1 v-else12.2 完整代码13、列表渲染指令13.1 介绍13.2 v-for中的索引13.3 示例代码13.4 使用key值得注意事项13.5 完整代码一、简介
1、概念
Vue是一套用于构建用户界面的前端框架。
2、vue的两个特性
2.1 数据驱动视图
在使用了vue的页面中vue会监听数据的变化从而自动重新渲染页面的结构。 1优点 当页面数据发生变化时页面会自动重新渲染。 2注意 数据驱动视图是单向的数据绑定。
2.2 双向数据绑定
在填写表单时双向数据绑定可以辅助开发者在不操作DOM的前提下自动把用户填写的内容同步到数据源中。 在网页中form表单负责采集数据Ajax负责提交数据。 js数据的变化会被自动渲染到页面上 页面上表单采集的数据发生变化的时候会被vue自动获取到并更新到js数据中。 1优点 开发者不再需要手动操作DOM元素来获取表单元素最新的值。
3、MVVM
MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model层、View层和ViewModel层。 Model表示当前页面渲染时所依赖的数据源。 View表示当前页面所渲染的DOM结构 ViewModel表示vue的实例它是MVVM的核心
二、vue基础用法
1、导入vue.js的script脚本文件
script src./lib/vue-2.6.14.js/script2、在页面中声明一个将要被vue所控制的DOM区域
div idapp{{username}}/div3、创建vm实例对象vue实例对象
const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {username: zhangsan}
})4、样例完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp{{username}}/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {username: zhangsan}})/script
/body
/html三、指令与过滤器
1、指令的概念
指令Directives是vue为开发者提供的模板语法用于辅助开发者渲染页面的基本结构。
2、六大类指令
1内容渲染指令 2属性绑定指令 3事件绑定指令 4双向绑定指令 5条件渲染指令 6列表渲染指令
3、内容渲染指令
3.1 介绍
内容渲染指令用来辅助开发者渲染DOM元素的文本内容
3.2 三个种类
1v-text 2{{}} 3v-html
3.3 v-text
1相关应用 p v-textusername姓名/p2结果
3缺点 v-text指令会覆盖元素内默认的值
3.4 插值表达式
1介绍 vue提供的{{}}语法专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法的专业名称是插值表达式。在实际开发中用的最多只是内容的占位符不会覆盖原有的内容。 2相关应用
p性名{{username}} /p3结果 4注意 插值表达式只能用在元素的内容节点中不能用在元素的属性节点中。
3.5 v-html
1介绍 v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素则需要用到v-html。 2相关应用
div v-htmlinfo/div3结果
3.6 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappp v-textusername/pp v-textgender/phrp性名{{username}} /pp性别{{gender}} /phrdiv v-htmlinfo/div/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {username: zhangsan,gender: 女,info: h4 stylecolor:red; font-weight:blod;你好世界/h4}})/script
/body
/html4、v-bind 属性绑定指令
4.1 v-bind
1介绍 v-bind属性绑定指令为元素的属性动态绑定属性值。 2相关应用
input typetext v-bind:placeholdertips3结果
4v-bind也可以简写成 : 作用是一样的
img :srcphoto alt stylewidth:150px4.2 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappinput typetext v-bind:placeholdertipshrimg :srcphoto alt stylewidth:150px/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {tips: 请输入用户名,photo: https://img-home.csdnimg.cn/images/20201124032511.png}})/script
/body
/html5、在插值和属性绑定中编写JS语句
5.1 用插值表达式计算
div1 2的结果是:{{1 2}}/div结果
5.2 操作插值表达式的内容
div{{tips}},反转后为:{{tips.split().reverse().join()}}/div结果
5.3 动态拼接内容
在使用v-bind属性绑定期间如果绑定内容需要进行动态拼接则字符串的外面应该包裹单引号。
div :titlebox index这是一个div/div5.4 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappdiv1 2的结果是:{{1 2}}/divdiv{{tips}},反转后为:{{tips.split().reverse().join()}}/divdiv :titlebox index这是一个div/div/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {tips: 请输入用户名,photo: https://img-home.csdnimg.cn/images/20201124032511.png,index: 3}})/script
/body
/html6、v-on 事件绑定指令
6.1 v-on介绍
vue提供了v-on事件绑定指令用来辅助程序员为DOM元素绑定事件监听。
6.2 函数的简写形式
: function() 可以简写为 add: function(){} add(){} 6.3 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapppcount的值是: {{count}}/pbutton v-on:clickadd展示1/buttonbutton v-on:clicksub展示2/button/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {count: 0},// methods的作用就是定义事件的处理函数methods: {add: function(){console.log(ok)},sub(){console.log(触发了sub处理函数)}}})/script
/body
/html6.4 通过this访问数据源中的数据
1相关应用
sub(){this.count - 1
}2绑定事件并传参
1.body里的代码
button v-on:clickadd(2)1/button2.methods里的代码
add(n){// vm.count nthis.count n
}3相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapppcount的值是: {{count}}/p!--绑定事件处理函数的时候可以使用()传递参数--button v-on:clickadd(2)1/buttonbutton v-on:clicksub-1/button/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {count: 0},// methods的作用就是定义事件的处理函数methods: {add(n){// vm.count nthis.count n},sub(){this.count - 1}}})/script
/body
/html6.5 v-on的简写形式
v-on可以简写为 button v-on:clickadd1/button等价于button clickadd1/button6.6 $event
1介绍 vue提供了内置变量叫做event它就是原生DOM的事件对象。2应用场景当函数开始传参而又想要控制该DOM对象时则可以通过event它就是原生DOM的事件对象。 2应用场景 当函数开始传参而又想要控制该DOM对象时则可以通过event它就是原生DOM的事件对象。2应用场景当函数开始传参而又想要控制该DOM对象时则可以通过event来操作。 3相关代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapppcount的值是: {{count}}/pbutton v-on:clickadd(1, $event)1/button/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {count: 0},// methods的作用就是定义事件的处理函数methods: {add(n,e){// vm.count nthis.count n// 判断this.count的值是否为偶数if(this.count % 2 0){// 偶数e.target.style.backgroundColor red} else {// 奇数e.target.style.backgroundColor }},}})/script
/body
/html6.7 注意
原生DOM对象有onclick、oninput、onkeyup等原生事件替换为vue的事件绑定形势后为v-on:click、v-on:input、v-on:keyup
7、click 事件修饰符
7.1 介绍
在事件处理函数中调用event.preventDefault()或者event.stopPropagation()是非常常见的需求。 .prevent 阻止默认行为例如阻止链接的跳转表单的提交 .stop 阻止事件冒泡。 .capture 以捕获模式触发当前的事件处理函数。 .once 绑定的事件只触发1次。 .self 只有在event.target是当前元素自身时触发事件处理函数。
7.2 示例代码
阻止链接跳转
a hrefhttp://www.baidu.com click.preventshow跳转到百度首页/a7.3 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappa hrefhttp://www.baidu.com click.preventshow跳转到百度首页/a/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {count: 0},// methods的作用就是定义事件的处理函数methods: {show(){console.log(点击了链接)}}})/script
/body
/html8、keyup 按键修饰符
8.1 介绍
在监听键盘事件时需要判断详细的按键可以为键盘相关的事件添加按键修饰符。
8.2 示例代码
input typetext keyup.escclearInput keyup.entercommitAjax8.3 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappinput typetext keyup.escclearInput keyup.entercommitAjax/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {},// methods的作用就是定义事件的处理函数methods: {clearInput(e){console.log(触发了clearInput方法)e.target.value },commitAjax(){console.log(触发了commitAjax请求)}}})/script
/body
/html9、v-model 双向数据绑定
9.1 双向数据绑定指令
vue提供了v-model双向数据绑定指令用来辅助开发者在不操作DOM的前提下快速获取表单的数据。
9.2 适用环境
1input输入框 type“radio” type“checkbox” type“xxxxx” 2textarea 3select
9.3 相关代码
p用户的名字是{{username}}/p
input typetext v-modelusername
hr
select v-modelcityoption value请选择城市/optionoption value1北京/optionoption value2上海/optionoption value3广州/option
/select9.4 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappp用户的名字是{{username}}/pinput typetext v-modelusernamehrselect v-modelcityoption value请选择城市/optionoption value1北京/optionoption value2上海/optionoption value3广州/option/select/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {username:zhangsan,city: 2},// methods的作用就是定义事件的处理函数methods: {}})/script
/body
/html10、v-model 指令修饰符
10.1 三种修饰符
1第一种修饰符 .number 自动将用户的输入值转为数值类型 input typetext v-model.numbern1 input typetext v-model.numbern2 span{{n1 n2}}/span2第二种修饰符 .trim 自动过滤用户输入的首尾空白字符
input typetext v-model.trimusername3第三种修饰符 .lazy 在change时而非input时更新
input typetext v-model.lazyusername10.2 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappinput typetext v-model.numbern1 input typetext v-model.numbern2 span{{n1 n2}}/spanhrinput typetext v-model.trimusernamebutton clickshowName获取用户名/buttonhrinput typetext v-model.lazyusername/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {username: lisi,n1: 1,n2: 2},// methods的作用就是定义事件的处理函数methods: {showName(){console.log(用户名是${this.username})}}})/script
/body
/html11、条件渲染指令
11.1 介绍
条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。
11.2 两种渲染指令
1v-if 原理每次动态创建或移除元素实现元素的显示和隐藏。 环境如果刚进入页面的时候某些元素默认不需要被展示而且后期这个元素很可能也不需要被展示出来此时v-if性能更好。
p v-ifflag这是被v-if控制的元素/p2v-show 原理每次动态为元素添加或移除display : none样式来实现元素的显示和隐藏。 环境如果要频繁地切换元素的显示状态用v-show性能会更好。
p v-showflag这是被v-show控制的元素/p11.3 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappp v-ifflag这是被v-if控制的元素/pp v-showflag这是被v-show控制的元素/p/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {// 如果 flag 为true,则显示被控制的元素如果为false则隐藏被控制的元素flag: true},// methods的作用就是定义事件的处理函数methods: {}})/script
/body
/html11.4 注意
在实际开发中绝大多数情况不用考虑性能问题直接用v-if就好了。
12、v-if 配套指令
12.1 v-else
div v-iftype A优秀/div
div v-else-iftype B良好/div
div v-else-iftype C一般/div
div v-else差/div12.2 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappdiv v-iftype A优秀/divdiv v-else-iftype B良好/divdiv v-else-iftype C一般/divdiv v-else差/div/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {// 如果 flag 为true,则显示被控制的元素如果为false则隐藏被控制的元素flag: true,type: A},// methods的作用就是定义事件的处理函数methods: {}})/script
/body
/html13、列表渲染指令
13.1 介绍
vue提供了v-for列表渲染指令用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for指令需要使用item in items形式的特殊语法。 其中 items是待循环的数组 item是被循环的每一项
13.2 v-for中的索引
v-for指令支持一个可选的第二个参数即当前项的索引。语法格式为(item, index) in items 注意v-for指令中的item项和Index索引都是形参可以根据需要进行重命名。
13.3 示例代码
tr v-for(item,index) in list :keyitem.id :titleitem.name indextd{{index}}/tdtd{{item.id}}/tdtd{{item.name}}/td
/tr13.4 使用key值得注意事项
1key的值只能是字符串或数字类型 2key的值必须具有唯一性key的值不能重复 3建议把数据项id属性的值作为key的值因为id属性的值具有唯一性 4使用Index的值当做key的值没有任何意义因为index的值不具有唯一性 5建议使用v-for指令时一定要指定key的值既提升性能又防止列表状态紊乱
13.5 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./lib/bootstrap.css
/head
bodydiv idapptable classtable table-bordered table-hover table-stripedtheadth索引/ththID/thth姓名/th/theadtbodytr v-for(item,index) in list :keyitem.id :titleitem.name indextd{{index}}/tdtd{{item.id}}/tdtd{{item.name}}/td/tr/tbody/table/div!--1.导入Vue的库文件在window全局就有了Vue这个构造函数--script src./lib/vue-2.6.14.js/script!--2.创建Vue的实例对象--script// 创建Vue的实例对象// 相当于 ViewModel层const vm new Vue({// el属性是固定的写法表示当前vm实例要控制页面上的哪个区域接收的值是一个选择器// 相当于 view层el: #app,// data对象就是要渲染到页面上的数据// 相当于 model层data: {list:[{id:1,name:张三},{id:2,name:李四},{id:3,name:王五}]},// methods的作用就是定义事件的处理函数methods: {}})/script
/body
/html
