v-model
双向绑定，监听用户的输入事件，更新数据
<input v-model="message">
<input class="ipt_travelTit" type="text" v-model.trim="title" @keyup.enter="login" @keydown.up="upclick" placeholder="请输入您的游记标题" /> // 去掉input内容前后空格 监听回车事件
v-bind
能够及时对页面的数据进行更改
必须是变量，不能是常量
缩写 v-bind :html属性
'{red:isred}'
'isred ? "red" : "blue"'
'[{red: "isred"}, {blue: "isblue"}]'
v-bind:class="activeNumber === n + 1 ? 'active' : ''"
<p v-bind:class="someclass"></p>
不加 v-bind 那么 someclass 就是个常量，没有任何动态数据参与。当加上 v-bind 之后，它的值 someclass 不是字符串，而是vue实例对应的 data.someclass 这个变量。
<input v-bind:value="message" v-on:input="message = $event.target.value" />
<input :value="message" @input="message =
三目运算 动态class名
<input type="button" class="sumbitBtn" :class="isChecked == true? 'checked' : ''" value="确认">
<p class="tt_ft" v-bind:class="{'ckeck' : checkAllFlag}">全选</p> // checkAllFlag为true渲染出 ckeck class名
v-on
缩写 v-on @方法
<input :value="name" v-model="body">
v-bind 产生的效果不含有双向绑定，所以 :value 的效果就是让 input的value属性值等于 data.name 的值，而 v-model 的效果是使input和 data.body 建立双向绑定，因此首先 data.body 的值会给input的value属性，其次，当input中输入的值发生变化的时候，data.body 还会跟着改变。
阻止冒泡
@click.stop=""
v-for
item in/of 数据json
<ul>
<li v-for="item in arr">{{item.name}}</li>
</ul>
v-show
控制元素显示与隐藏
show布尔值
<div v-show="show">
</div>
new Vue({
el: '#box',
data() {
return {
show: true
}
}
})
v-text
读取文本内容
<div>
<p v-text="msg"></p>
</div>
new Vue({
el: '',
data() {
return {
msg: 'aaa'
}
}
})
v-html
<div>
<p v-html="msg"></p>
</div>
new Vue({
el: '',
data() {
return {
html: '<p>123</p>'
}
}
})
v-if v-else v-else-if
只有一个会被渲染出来
v-once
@click.once="show"
v-cloak 防闪烁
使用 v-cloak 防止页面加载时出现 vuejs 的变量名，使用方法如下：在做外层的div 里面添加v-cloak，css里面display：none
<div>
<div v-cloak="">欢迎{{msg}}</div>
</div>
new Vue({
el: '',
data() {
return {
msg: '1111'
}
}
})
[v-cloak] {
display: none;
}
v-pre
在模板中跳过vue的编译，直接输出原始值
如下面例子网网页会渲染出 欢迎{{msg}}
<div>
<div v-pre>欢迎{{msg}}</div>
</div>
new Vue({
el: '',
data() {
return {
msg: '1111'
}
}
})
{{}} 输出
出来变量，也可以加方法
<li v-for="(item,index) in dateList" :class="item.isSign =='0' ? 'activeQ': ''"
key="index"
>
{{getDay(item.id)}}
</li>
getDay (day) {
var arr = day.split('-');
let dayN = arr[2];
return dayN;
}
计算属性computed
var vm = new Vue({
el: '#app',
data: {
message: 'hello',
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
}
}
})
v-if v-else v-else-if
只能执行一个
和v-for一起使用时 v-for优先级更高
侦听属性watch
响应数据的变化，
<div id="watch-example">
<p>{{ answer }}</p>
<input v-model="question">
</div>
var watchVM = new Vue({
el: '#watch-example',
data：{
answer: 'answer',
question: '',
},
watch: {
question: function() {
// question发生改变执行此函数
}
}
})
vue mvvm module模型 view视图 controller控制器 vm视图数据之间的传递
import Header from '@/components/public/header/header'
export default {
props: ['shopId']
name: 'mall',
components: {
Header
},
data () {
return {
msg: '商城首页'
}
},
mounted(){// 数据请求
this._timeOut = setInterval(() => {
do something
},2000)
},
mounted(){
this.init();
beforeDestroy() { // 清除计时器
clearInterval(this._timeOut);
}
},
created () {
},
updated() {
window.scroll(0, 0);
},
methods: {
init(){
}
},
watch: {
shopId(newValue, oldValue) {
console.log(newValue)
this.init();
}
},
mixins: [http]
}
