一、指令
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;
}
v-if v-else v-else-if
只能执行一个
和v-for一起使用时 v-for优先级更高
二、选项/数据
data 相当于react的state
methods 模板调用的函数，需写在methods里面
props 接收父组件的数据
propsData 只存在new的示例中
var vm = new Comp({
propsData: {
msg: 'hello'
}
})
侦听属性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发生改变执行此函数
}
}
})
计算属性computed
var vm = new Vue({
el: '#app',
data: {
message: 'hello',
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
}
}
})
三、生命周期
beforeCreate 实例初始化之前
created 实例创建完成，还没开始挂载
beforeMount 挂载之前被调用
mounted el已挂载到实例上 可调用nextTick
buforeUpdate 数据更新时调用
updated dom已更新
activated keep-alive组件激活时调用
deactivated 组件停用时调用
beforeDestroy 实例销毁之前调用
destroyed 实例销毁后调用
errorCaptured 子孙组件错误调用
四、选项/组合
parent
在子组件
console.log(this.$parent)
root
console.log(this.$root) // 当前组件树的根vue实例
mixins
定义一部分属性或者公共的方法，在每个组件之中使用，方法参数在各函数之间不共享，没有任何通信
在调用自身钩子之前调用
注：当父组件也有相同属性时以父组件/实例为准
import minxin from 'xxxx.js'
new Vue({
mixins: [minxin]
})
extends
与minxins类似，但优先级次于父组件，对父组件扩充
var CompA = {
updated : function(){
console.log('我是扩展的updated');
},
methods:{
//下面这个并没有被执行，如果方法名一样，只执行构造器里面的原生方法，混入跟扩展类似
add:function(){
console.log('我是扩展出来的方法');
this.num++;
}
}
}
// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
extends: CompA,
...
}
name
只有作为组件选项时起作用
delimiters
改变纯文本插入分隔符
function
render () {
<div>
{()=> this.func()}
</div>
}
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]
}
<div id="app">
<say-hello></say-hello>
<my-name :name="username"></my-name>
</div>
<script>
// 子组件sayHello
Vue.component("sayHello", {
template: "<h1>${this.$parent.username}</h1>",
delimiters: "${}", // 改变纯文本插值语法 ${xxx}
})
var app = new Vue({
el: "#app",
data: {
username: 'xxxx',
},
components: {
"myName": {
template: `<div>
<p>{{name}}</p>
<P>{{this.$parent.month}}</P>
</div>`,
props: ["name"],
}
}
})
</script>
网友评论