第一个项目,使用webstorm搭建vue
https://blog.csdn.net/weixin_40760196/article/details/79952652
vue的插值表达式
可以填数据,表达式,甚至是函数
数据遵循双向绑定,和Angular差不多
vue指令
1.文本显示
- 鼠标悬停提示信息
<h1 v-bind:title="hint">{{ msg }}</h1>
- 内容文本 innertext
<h2 v-text="msg"></h2>
- 内容html innerhtml
<h3 v-html="msg"></h3>
2.条件判断,控制是否显示
- if条件
<h3 v-if=true>1234545</h3>
- ifelse 条件
<h3 v-if="Math.random()>0.5">显示</h3>
<h3 v-else>隐藏</h3>
- else-if
<div v-else-if="type === 'B'">
- 是否show
<h3 v-show="!is_show">1234545</h3>
if 和 show 的区别
v-if 数据属性对应的值,如果为假,则不在页面中渲染,反之亦然appendChild() removeChild()
v-show 控制dom元素的显示隐藏display:none|block
对于频繁操作的数据,建议使用v-show
- 控制类名也可以进行显示隐藏,原理和v-show相似
v-bind: 缩写 :
<h3 class="active" v-bind:class="{active:true}">342</h3>
v-bind用于绑定属性
3.事件绑定
- 点击事件 缩写 @click
<button v-on:click="clickHandler">Essential Links</button>
methods: {
clickHandler (e) {
// alert('click')
console.log('handler click')
console.log(this) # 就是当前的vue对象
this.is_show = !this.is_show
}
}
4.事件循环
- v-for
<li v-for="site in sites">
{{ site.name }}
</li>
https://www.runoob.com/vue2/vue-loop.html
也可以用来迭代对象,提供key,value键名
使用v-for时一定要加上key(唯一),以便让diff算法优化虚拟dom,加快渲染速度
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
5.双向绑定
<input v-model="msg"/>
6.计算属性
- computed
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
computed 和 method
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
- method 每次重新渲染时都会执行
- 只要当依赖的缓存发生变化时,才会改变
-computed set
7.监听事件
- watch监听
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
nval 前一个值
oval 现在的值
更复杂的调用
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
})
</script>
8.事件修饰符
使用组件
- 引入自定义组件的方式
1.全局组件,所有实例都能用全局组件。
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
2.局部组件
我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用: