标签：Vue 1.0 复习 app active message data isActive
Vue复习1.0内容：Vue基础语法、计算属性、概念、指令
Vue复习2.0已发布，文章涉及完整代码已全部上传至GitHub：Vue复习2.0——组件化开发详解
@
目录Vue复习1.0
Vue的MVVM
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来
View层（视图层）：
在前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息，即看到的结构、布局和外观（UI）。
Model层（数据层）：
代表真是内容的数据，数据可能是固定的，但更多的是来自服务器请求下来的数据。
VueModel层（视图模型层）：
视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
Vue模板
<body>
<div id="app">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
</body>
1. Vue列表显示
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
}
})
</script>
2. 计数器
正如页面直接用{{data里的值，eg：count}},body里的标签要用vue中data的值也直接用
<h3>当前值为：{{count}}</h3>
<button @click="count++">+</button>
但是vue中method等要用到data的数据就得加this,因为methods里面本身没有data里的数据
methods:{
add:function(){
this.count++
}
}
PS：vue中的methods不可以使用箭头函数，因为this指向的不是vue实例，使用箭头函数打印this，发现是undefined
methods: {
test: () => {
console.log(this); // undefined
}
}
3. Vue指令
1. v-html
该指令后面往往会跟上一个string类型并将string里的html解析、渲染
<h3 v-html="message"></h3>
<script>
const app = new Vue({
el: '#app',
data: {
message: '<span>你好</span> '
}
})
</script>
//span标签可被v-html解析
2. v-once
元素和组件只渲染一次，不会随着数据的改变而改变
3. v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {
display: none;
}
<div id="app">
<h2>{{message}}</h2> <!-- 未使用v-cloak -->
<h2 v-cloak>{{message}}</h2>
</div>
<script>
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
}, 1000)
</script>
4. v-bind
（语法糖 ：）
<img v-bind:src="imgURL" alt=""> === <img :src="imgURL" alt="">
- v-bind动态绑定class(动态绑定的为对象)
<style>
.active {
color: red;
}
.small {
font-size: 15px;
}
</style>
</head>
<body>
<div id="app">
<!-- 法一：通过判断绑定类且与原来的类不冲突 -->
<!--<h2 v-bind:class="{类名1: true, 类名2: false}">{{message}}</h2>-->
<h2 class="small" :class="{active: isActive}">测试文本1</h2>
<!-- 属性加不加引号都可以 -->
<h2 :class="{'active':isActive}">测试文本2</h2>
<!-- 法二： 动态绑定放在methods里 -->
<h2 :class="getClasses()">测试文本3</h2>
<!-- 法三：动态绑定在返回对象的计算属性 -->
<h2 :class="getClass">测试文本4</h2>
<p></p>
<button :click="btnClick">按钮</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isActive: false,
active: 'active',
},
methods: {
btnClick: function () {
this.isActive = !this.isActive;
},
getClasses: function () {
return { active: this.isActive };
//以对象形式返回active: this.isActive，即:class="getClasses()变为 :class="{'active':isActive}"
},
},
computed: {
getClass: function () {
return { active: this.isActive, };
},
},
});
</script>
</body>
点击按钮前后：
- v-bind动态绑定class(动态绑定的为数组)
<style>
.active {
color: red;
}
.small {
font-size: 15px;
}
</style>
<div id="app">
<!-- 直接通过数组绑定若干个类名 -->
<h2 :class="[active, small]">测试文本1</h2>
<!-- 数组与三元运算符 -->
<h2 :class="[isActive?'active':'']">测试文本3</h2>
<!-- 通过方法绑定 -->
<h2 class="small" :class="getClasses()">测试文本3</h2>
<p></p>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
active: 'active',
small: ' small',
isActive: false,
},
methods: {
btnClick: function () {
this.isActive = !this.isActive;
},
getClasses: function () {
return [this.active];
//以数组形式返回[this.active]([active])，即 :class="getClasses()等价变化为:class=[active]
},
},
});
</script>
点击按钮前后：
5. v-on(缩写：@)
.once ： 只触发一次回调。
.stop ：调用 event.stopPropagation()。
.prevent ：调用 event.preventDefault()。
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
@click="btnClick()v-on方法的小括号可写可不写，但若写方法时省略了小括号但方法本身需要一个参数, Vue会默认将浏览器生产的event事件对象作为参数传入到方法
方法定义时, 若同时需要event对象又需要其他参数，需手动的获取到浏览器参数的event对象: $event
<div id = "demo">
<button @click = "btnClick('abc',$event)">按钮</button>
</div>
const demo = new Vue({
el:'#demo',
methods:{
btnClick:function(a,event){
console.log(a,event);
}
}
})
6. v-if
当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
7. v-for
推荐加个
:key=,key的作用主要是为了高效的更新虚拟DOM
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
<li v-for="(item,index) in names">{{item}}-{{index}}</li>
v-for="(value, name, index) in object"
7. v-model：实现表单元素和数据的双向绑定
原理：
包含两个操作：1.v-bind绑定一个value属性；2.v-on指令给当前元素绑定input事件,进行值的更新
<input type="text" :value="message" @input="message = $event.target.value">
v-model还可以绑定单选框、复选框
<h2>您的爱好是: {{hobbies}}</h2>
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
hobbies: [], // 多选框,
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
}
})
</script>
v-model的修饰符：
lazy修饰符：
默认情况下，v-model默认在input事件中会对输入框的数据进行同步，但lazy修饰符可以转为在自定义的事件之后再进行同步。如：失去焦点或者按回车键时更新
<input v-model.lazy="msg">
number修饰符：
默认情况下，输入框将输入的数据当做字符串类型进行处理，number修饰符可以让输入框的内容自动转成数字类型
<input type="number" v-model.number="age">
<h2>{{age}} {{typeof age}}</h2>
trim修饰符：
自动过滤用户输入的首尾空白字符
<input type="text" v-model.trim = "mes">
4. Vue计算属性
注意：计算属性不用加（），要有return值
<div id="example">
<p> {{ message }}</p>
<p>{{reversedMessage }}</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
计算属性缓存 vs 方法
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
computed: {
now: function () {
return Date.now()
}
}
计算属性不会更新，但相比之下，每当触发重新渲染时，调用方法将总会再次执行函数
需要计算属性缓存的原因：
（官网解释）假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter。如果你不希望有缓存，请用方法来替代。
参考资料
标签：Vue,1.0,复习,app,active,message,data,isActive 来源： https://www.cnblogs.com/fharry/p/16614741.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。