Vue 介绍
- Vue 可以用来开发 App
- 核心只关注视图
- 双向数据绑定
- 不在操作 DOM，更多的时间关心数据的业务逻辑
MVC 和 MVVC
- MVC 是后端的分层开发概念
- MVVC 是前端视图层的概念
- VM 是核心
- VM 是 M 和 V 之间的调度者
- M ：每个页面中单独的数据
- V ：每个页面中的 HTML 结构
- 每当 V 层想要获取后保存数据的时候，都要由 VM 做中间的处理
- MVVM 让我们开发更加方便，提供了数据的双向绑定
- 数据的双向绑定是由 VM 提供的
Vue 的操作
- 导入 Vue 包
- 创建一个 Vue 实例
+ 当我们导入包之后，在浏览器的内存中，就多了 Vue 构造函数
+ el 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
+ data 属性中，存放的是 el 中要用到的数据
+ methods 属性中，定义了当前 Vue 实例所有可用的方法
+ filters 定义私有过滤器 - {{ }} 是插值表达式
- Vue 实例所控制的这个元素区域，就是我们的 V
- 我们 new 出来的这个 vm 对象，就是我们 MVVM 中的 VM 调度者
- data 就是 MVVM 中的 M，专门用来保存每个页面的数据的
var vm = new Vue({ el: '#app', data: { msg: '欢迎学习 Vue' // 通过 Vue 提供的指令，很方便的把数据 //渲染到页面上，程序员不在手动操作 DOM元素了 //【前端的 Vue 之类的框架，不提倡我们手动的操作 DOM 元素了】 } });
Vue 基本指令
-
解决闪烁的问题
- v-cloak
- 使用 v-cloak 能够解决插值表达式闪烁的问题
[v-cloak] { display: none; } - v-text
- 默认 v-text 是没有闪烁问题的
- v-text 会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的占位符，不会把整个元素的内容清空
- v-html 会把标签解析
<div id="app"> <p v-cloak>+++++ {{ msg }} -----</p> <h4 v-text='msg'>========</h4> <div v-html='msg2'></div> <!-- 会解析 <h1>哈哈</h1> --> </div>
- v-cloak
-
v-bind:
- v-bind: 是 Vue 中，提供的用于绑定属性的指令
- v-bind: 指令可以被简写为
:要绑定的属性 - v-bind 中可以写合法的 js 表达式
<input type="button" value="按钮" v-bind:title="mytitle"> <!-- mytitle 是变量 --> <input type="button" value="按钮" :title="mytitle + '123'"> <!-- '123是字符串' -->
-
v-on:
- v-on: 是 Vue 中提供的事件绑定机制
- 缩写是 @
-
在 VM 实例中，如果想要获取 data 上的数据，或者想要调用 methods 里的方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的 this 就表示我们 new 出来的 vm 实例对象
-
VM 实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从 data 上同步到页面中去。【好处：程序员只需要关心数据，不需要考虑如何渲染 DOM 页面】
-
事件修饰符
-
.stop 阻止冒泡
<div class="inner" @click="divHandler"> <input type="button" value="戳它" @click.stop="btnHandler"> </div> -
.prevent 阻止默认行为
<a href="http:www.baidu.com" @click.prevent="linkClick">有问题，先百度</a> -
.capture 实现捕获触发事件的机制
<div class="inner" @click.capture="divHandler"> <input type="button" value="戳它" @click="btnHandler"> </div> -
.self 实现只有点击当前元素的时候，才会触发事件处理函数
<div class="inner" @click.self="divHandler"> <input type="button" value="戳它" @click="btnHandler"> </div> -
.once 只触发一次事件处理函数
<a href="http:www.baidu.com" @click.prevent.once="linkClick">有问题，先百度</a> -
.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为
-
-
键盘修饰符
-
.enter
<input type="text" v-model="name" @click.enter="add"> <input type="text" v-model="name" @click.13="add"> -
.tab
-
.delete (捕获“删除”和“退格”键)
-
.esc
-
.space
-
.up
-
.down
-
.left
-
.right
-
.键盘码就行了，例如：f2 的键盘码 113<input type="text" v-model="name" @click.113="add"> -
自定义全局按键修饰符 ---------- 起别名
Vue.config.keyCodes.f2 = 113;
-
-
v-model 和 双向数据绑定 ---------- 唯一的
- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定
- 使用 v-model 指令，可以实现表单元素和 model 中数据的双向绑定
- 注意：v-model 只能运用在表单元素中
- input(radio，text，address，email…) ------ select ------ checkbox ------ textarea
- eval()
// 注意：这是投机取巧的方式，正式开发中，尽量少用 var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'; this.result = eval(codeStr); -
v-for 循环
-
v-for 循环普通数组
- itme 元素
- index 索引值
<p v-for='(item,index) in list'>{{ index }}====={{ item }}</p> -
v-for 循环对象数组
<p v-for="(item,index) in list">id:{{ item.id }}======名字:{{ item.name }}=====索引:{{ index }}</p> -
v-for 循环对象
- 在遍历对象身上的键值对的时候，除了有 val，key，在第三个位置还有一个索引
<p v-for="(val,key,i) in user">值是：{{ val }} ===== 键是：{{ key }} ===== 索引是：{{ i }}</p> -
in 后面放过 普通数组，对象数组，对象，还可以放数字
- 如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始
<p v-for="count in 10">这是第 {{ count }} 次循环</p> -
key 属性的使用
- v-for 循环的时候，key 属性只接收
string/number - key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值
- 在组件中，使用 v-for 循环的时候，或者一些特殊情况中，如果 v-for 有问题，必须在使用 v-for 的同时，指定唯一的 字符串/数字 类型
:key值
<p v-for="item in list" :key="item.id"> <input type="checkbox"> {{ item.id }}------{{ item.name }} </p> - v-for 循环的时候，key 属性只接收
-
-
v-if 和 v-show
- v-if 的特点：每次都会重新删除或创建元素
- v-show 的特点：每次不会重新进行 DOM 的删除和创建操作，只是切换了元素的 display:none 样式
- v-if 有较高的切换性能消耗
- v-show 有较高的初始渲染消耗
- 如果元素涉及到频繁的切换，最好不要使用 v-if，而是推荐使用 v-show
- 如果元素可能永远也不会被显示出来被用户看到，不建议用 v-show，推荐使用 v-if
-
过滤器
- 可被用作一些常见文本的格式化
- 可以用在两个地方
mustachc 插值和v-bind 表达式 - 使用
<p>{{ msg | msgFormat('疯狂','123') | test }}</p> // 定义一个全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat',function(msg,arg,arg2) { // 字符串的 replace 方法，第一个参数除了可写一个字符串之外，还可以定义一个正则 return msg.replace(/单纯/g,arg+arg2); }); Vue.filter('test',function(msg) { return msg + '======'; }); // 过滤器的定义语法 // Vue.filters('过滤器名称',function() {}) // 过滤器中的 function，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面传递过来的数据 // Vue.filters('过滤器名称',function(data) { // return data + '123'; // }) - 全局过滤器，就是所有的 VM 实例都共享的
- 私有过滤器
- 过滤器有两个条件，【过滤器名称 和 处理函数】
- 过滤器调用时，采用的是就近原则，如果私有的过滤器和全局过滤器名字一致，这时候
优先调用私有过滤器
var vm2 = new Vue({ el: '#app2', data: { }, methods: { }, filter: { dateFormat: function(dateStr,pattern) { } } });
-
使用
Vue.directive()定义全局的指令 ----------- v-focus- 其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加
v-前缀 - 但是：在调用的时候，必须在指令名称前加上
v-前缀来进行调用 - 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
- HTML 中会有一个调用 v-focus
Vue.directive('focus',{ bind: function(el) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次 // 注意：在每个函数中，第一个参数，永远是 el ，表示被绑定了指令的那个元素，这个 el 参数，是一个原生的 JS 对象 // 在元素刚绑定了指令的时候，还没有插入到 DOM 中去，这时候调用 focus 方法没有作用 // 因为，一个元素，只有插入 DOM 之后，才能获取焦点 // el.focus(); }, inserted: function(el) { // inserted 表示元素插入到 DOM 中的时候，会执行 inserted 函数【触发一次】 el.focus(); }, updated: function(el) { // 当 VNode 更新的时候，会执行 update，可能会触发多次 } }); - 其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加
-
使用 directives:{} 自定义私有指令
<h3 v-fontweight="200"></h3> var vm = new Vue({ el: '#app', data: { }, directives: { // 自定义私有指令 'fontweight': { // 设置字体粗细的 bind: function(el,binding) { el.style.fontweight = binding.value; } } } }); -
函数简写
var vm = new Vue({ el: '#app', data: { }, directives: { 'fontweight': { bind: function(el,binding) { el.style.fontweight = binding.value; } }, // 简写的代码 'fontsize': function (el,binding) { // 注意：这个 function 等同于把代码写到了 bind 和 update 中去 el.style.fontSize = parseInt(binding.value) + 'px'; } } });
在 Vue 中如何使用样式
-
使用 class 样式
-
数组
- 直接传递一个数组
- 注意：这里的 class 需要使用 v-bind 做数据绑定
<h1 :class="['red','thin']">这是一个很大的h1!!!</h1> -
数组中使用三元表达式
<h1 :class="['red','thin',flag?'active':'']">这是一个很大的h1!!!</h1> -
数组中嵌套对象
- 在数组中使用对象来代替三元表达式，提高代码的可读性
<h1 :class="['red','thin',{'active': flag}]">这是一个很大的h1!!!</h1> -
直接使用对象
- 在为 class 使用 v-bind 绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以这里没写引号；属性的值是一个标识符
<h1 :class="{ red: true,thin: true,italic: false,active: false }">这是一个很大的h1!!!</h1> <h1 :class="classObj">这是一个很大的h1!!!</h1>
-
-
使用内联样式
-
直接在元素上通过
:style的形式，书写样式对象- 对象就是无序键值对的集合
- 如果是 font-weiht 带有
-的形式，对象不能省略引号
<h1 :style="{ color: 'red','font-weight': 200 }">这是一个H1</h1> <h1 :style="styleObj">这是一个H1</h1> -
将样式对象，定义到
data中，并直接引用到:style中- 在 data 上定义样式
data: { styleObj: { color: 'red','font-weight': 200 } }, - 在元素中，通过属性绑定的形式，将样式对象应用到元素中
<h1 :style="styleObj">这是一个H1</h1>
- 在 data 上定义样式
-
在
:style中通过数组，引用多个data上的样式- 在 data 上定义样式
data: { styleObj: { color: 'red','font-weight': 200 }, styleObj2: { 'font-style': 'italic' } }, - 在元素中，通过属性绑定的形式，将样式对象应用到元素中
<h1 :style="[ styleObj, styleObj2 ]">这是一个H1</h1>
- 在 data 上定义样式
-
事件
- 在 Vue 中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了
<input type="button" value="添加" @click="add()">
补充知识
- ES6 中定义了字符串的新方法 -------- 填充字符串
- String.prototype.padStart(maxlength,fillString=’’) ------ 在头填充
- maxlength 参数：填充完毕的总长度
- fillString 参数：用什么来填充
- String.prototype.padEnd(maxlength,fillString=’’) ------- 在尾填充
// padStart() 日期时间前面补 0 var hh = dt.getHours().toString().padStart(2,'0'); - String.prototype.padStart(maxlength,fillString=’’) ------ 在头填充
- Vue 中所有的指令，在调用的时候，都以
v-开头
947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
