VUE学习之基本指令
VUE基本指令
- 1.vue是一个前端框架
- MVC和MVVM的区别
- VUE之 - `基本代码结构` 和 `插值表达式` 、`v-cloak`
- VUE指令之`v-text` 和 `v-html`
- VUE指令之 `v-bind` 绑定属性三种用法
- VUE指令之 `v-on` 和 `跑马灯效果`
- 跑马灯效果
- VUE指令之 `v-on缩写` 和 `事件修饰符`
- v-on 缩写
- 事件修饰符 （一般与事件绑定写）
- Vue指令之`v-model`和`双向数据绑定`
- `v-model`实操之简易计算器
- 在VUE中使用样式
- 使用class样式
- 使用style样式
- VUE指令之 `v-for` 和 `key` 属性
- VUE指令之 `v-if` 和 `v-show`
1.vue是一个前端框架
-
Vue.js是目前最火的一个前端框架，React是最流行的一个前端框架(React除了开发网站，还可以开发手机App,Vue语法也是可以用于进行手机App开发的，需要借助于Weex)
-
Vue.js 是前端主流框架之一，和Angular.js、React.js一起，并称为前端三大主流框架!
-
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目开发)
-
前端的主要工作？主要负责MVC中的V这一层，主要工作就是和界面打交道，来制作前端页面效果
MVC和MVVM的区别
- MVC是后端的分层开发概念
- MVVM是前端视图层概念，主要关注于视图层分离，分离成：Model，View，View-Model
VUE之 - 基本代码结构 和 插值表达式 、v-cloak
- 基本结构
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script src="lib/vue.min.js">script>
head>
<body>
<div id="app">div>
<script>var vm = new Vue ({el:'#app',data:{},methods:{}});
script>
body>
html>
- 插值表达式与[v-cloak]解决代码闪烁问题
<style>[v-cloak] {display: none;}
style>
<div v-cloak>{{msg}}div>
VUE指令之v-text 和 v-html
- 区别在与v-text不解析html标签 v-html解析文本中的html标签
VUE指令之 v-bind 绑定属性三种用法
- 直接使用指令
v-bind - 使用简化指令
: - 在绑定的时候，拼接绑定内容：
:title="btn+'这里写追加的内容'"
VUE指令之 v-on 和 跑马灯效果
跑马灯效果
- HTML结构：
<div id="app"><p>{{info}}p><input type="button" value="开启" v-on:click="go"><input type="button" value="停止" v-on:click="stop">div>
- Vue实例：
// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {info: '猥琐发育，别浪~！',intervalId: null},methods: {go() {// 如果当前有定时器在运行，则直接returnif (this.intervalId != null) {return;}// 开始定时器this.intervalId = setInterval(() => {this.info = this.info.substring(1) + this.info.substring(0, 1);}, 500);},stop() {clearInterval(this.intervalId);}}});
VUE指令之 v-on缩写 和 事件修饰符
v-on 缩写
<div id="app"><button v-on:click="show">点我button><button @click="show(x)">点我button>
div>
事件修饰符 （一般与事件绑定写）
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件监听器时使用事件捕获模式
- .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
- .once 事件只触发一次
Vue指令之v-model和双向数据绑定
- 注意：vue中只有这一个双向数据绑定指令
- 基本代码
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script src="lib/vue.js">script>
head>
<body>
<div id="app"><input type="text" :value="msg"><input type="text" v-model="msg">
div>
<script>var vm = new Vue ({el:'#app',data:{msg:'hello vue'},methods:{}});
script>
body>
html>
v-model实操之简易计算器
- HTML 代码结构
<div id="app"><input type="text" v-model="n1"><select v-model="opt"><option value="0">+option><option value="1">-option><option value="2">*option><option value="3">÷option>select><input type="text" v-model="n2"><input type="button" value="=" v-on:click="getResult"><input type="text" v-model="result">div>
- Vue实例代码：
// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {n1: 0,n2: 0,result: 0,opt: '0'},methods: {getResult() {switch (this.opt) {case '0':this.result = parseInt(this.n1) + parseInt(this.n2);break;case '1':this.result = parseInt(this.n1) - parseInt(this.n2);break;case '2':this.result = parseInt(this.n1) * parseInt(this.n2);break;case '3':this.result = parseInt(this.n1) / parseInt(this.n2);break;}}}});
在VUE中使用样式
使用class样式
- class基本样式
<h1 class="red thin">这是一个H1标签h1>
- 数组
<h1 :class="['red', 'thin']">这是一个H1标签h1>
- 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个H1标签h1>
- 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个H1标签h1>
- 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个H1标签h1>
使用style样式
-
直接在元素上通过
:style的形式，书写样式对象 -
将样式对象。定义到
data中，并直接引用到:style中
- 在data上定义样式
data: {styleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中
<h1 :style="h1StyleObj">这是一个善良的H1h1>
- 在
:style中通过数组，引用多个data上的样式对象
- 在data上定义样式 ：
data: {styleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },styleObj2: { fontStyle: 'italic' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[styleObj, styleObj2]">这是一个H1标签h1>
VUE指令之 v-for 和 key 属性
- 迭代数组
<ul><li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}li>
ul>
- 迭代对象中的属性
<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}div>
- 迭代数字
<p v-for="i in 10">这是第 {{i}} 个P标签p>
2.2.0+的版本中，当在组件中使用 v-for 时 ，key现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
VUE指令之 v-if 和 v-show
v-if 的特点：每次都会重新删除或创建元素
v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
v-if 有较高的切换性能消耗
v-show 有较高的初始渲染消耗
如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
!本文章为自学记录，不存在任何商业行为!
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！