因为一些原因决定把自己学的vue的一些知识都整理一下,系统的复习一下,同时查漏补缺。
今天复习的内容
window.onload = function(){
var App = {
template: `<div>
<input type="text" v-model="message">
{{message | rever('$')}}
<hr>
<button @click="change">改变stu[0].name</button>
<hr>
<input type="text" v-model="n1"> +
<input type="text" v-model="n2"> *
<input type="text" v-model="rate"> = {{resule}}
</div>`,
data: function(){
return {
message: '',
stu: [{name: 'lucy'}],
n1: '',
n2: '',
rate: ''
}
},
methods: {
change () {
this.stu[0].name = 'lihiohg'
}
},
filters: {
rever: function(dataStar,rsa){
return rsa + ':' + dataStar.split('').reverse().join('')
}
},
watch: {
message: function(newV, oldV){
console.log(newV, oldV)
},
stu: {
deep: true,
handler: function(newV, oldV){
console.log("you change this.stu[0].name")
console.log(newV, oldV)
}
}
},
computed: {
resule: function(){
return ((this.n1-0) + (this.n2-0)) * (this.rate)
}
}
}
new Vue({
el: "#app",
components: {
app: App,
},
template: '<app/>'
})
}
- v-bind和v-model
单项数据绑定(vue->html)和双向数据绑定(vue->html->vue)
这个例子一般都是用两个input框在加一个span来验证
<input type="text" :value="message">
<input type="text" v-model="message">
{{message}}
这样就可以很明显的看出来两者的区别了。
- 组件封装
components和component:分为子组件和全局组件
父组件调用子组件
先有子—var App= { }
声明子—components: { app: App }
使用子—template: ‘<app ./>’
父组件向子组件传递数据
父传子—使用属性的方式传递
子声明—props:[ ‘title’ ]
子使用—{{title}}
window.onload = function(){
var Son = {
template: `
<div>
接收到父组件的数据是 {{title}}
<h1 v-if="seen">1</h1>
<h1 v-show="seen">2</h1>
<ul>
<li v-for="stu in [{name: 'zhangsan'},{name: 'lisi'}]">
{{stu.name}}</li>
</ul>
<button @click="change">click me</button>
<hr>
<input type="text" :value="text"><br />
<input type="text" v-model="text"><br />
<span>{{text}}<span>
</div>`,
props: ['title'],
data:function () {
return {
seen: true,
text: "hello"
}
},
methods: {
change () {
this.seen = !this.seen
}
}
};
var App = {
components: {
son: Son
},
template: `
<div>
<son :title = "xxx"></son>
</div>
`,
data: function () {
return {xxx: "abc"}
}
};
new Vue({
el: '#app',
components: {
app: App
},
template: '<app/>'
})
}
-过滤器
filter和filters:分为子过滤器和全局过滤器
{{待处理数据 | 过滤器名称}}
过滤器名称中可以传递参数,
filters: {
过滤器名称:function(data,参数1,参数2){
return 编写你想实现的效果
}
}
在第一段长代码里面有,这里就不重复写了
全局过滤器和全局组件的写法是一样的
- 监视器——单个监视和整体监视
watch——单个监视
watch: {
message: function(newV, oldV){ //浅层监视,直接监视被监视的变量
console.log(newV, oldV)
},
stu: { //深层监视 使用deep
deep: true,
handler: function(newV, oldV){
console.log("you change this.stu[0].name")
console.log(newV, oldV)
}
}
}
深层监视一般都是监视数据类数据,因为在监视时,监视的是对象的地址,但是数组数据改变时,数组本身的地址是没有改变的,改变的是属性值,所以直接使用浅层监视会导致监视失败。
简单数据用watch监视,复杂数据用深层监视
- 整体监视——computed
computed:{
监视业务名:function(){return }}
<input type="text" v-model="n1"> +
<input type="text" v-model="n2"> *
<input type="text" v-model="rate"> = {{resule}}
computed: {
resule: function(){
return ((this.n1-0) + (this.n2-0)) * (this.rate)
}
}
写的时候有些功能过滤器也可以实现监视器的效果,但是最好还是将过滤器写的简单一些,毕竟过滤器指的就是将一组数据变为另一组数据
写的时候注意缓存问题
options:根属性
el:目的地可以使用string也可以使用Dom
template:模板
data:一个函数,return一个对象,对象中的key可以直接在页面中使用 this.xxx
components:key组件名,value组件对象
methods:配合事件使用
props:子组件接受参数时设置,数组
v-if:v-show 元素的插入移除和判断元素是否显示
v-if:v-else 使用时必须相邻使用
v-bind:v-on 为属性赋值 对事件绑定
v-bind:v-model 单向数据流 双向数据流
今天复习的都是最基础的东西,但是既然是复习,还是打算从最简单的复习