喜欢请关注 会不定时更新 ***
学习前VS使用的插件
插件1.jpg
MVC和MVVM的区别
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
- VM层 实现了双向数据绑定的思想
一张图说明上述问题
MVC和MVVM.png
-
在VUE当中的对应关系
对应关系.png
v-cloak 解决闪烁问题
- v-cloak 实现的原理，是 vm 创建好之后，动态 移除 v-cloak 属性，从而 显示 插值表达式的节点
- 应用场景：当网络比较卡的时候，我们可以为 最外层的 元素，添加 v-cloak ，防止用户看到 插值表达式
<style>
[v-cloak] {
display: none;
}
</style>
<!-- v-cloak 实现的原理，是 vm 创建好之后
动态 移除 v-cloak 属性，从而 显示 插值表达式的节点 -->
<div id="app" v-cloak>
<h3>{{msg}}</h3>
<h3>{{1+1}}</h3>
<h3>{{boo ? '条件为真' : '条件为假' }}</h3>
<h3>{{msg.length}}</h3>
<!-- 注意：插值表达式，只能用在内容区域，不能用在属性节点中； -->
<h3>{{arr[1]}}</h3>
</div>
<script src="./lib/vue-2.5.16.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue.js',
boo: false,
arr: [1, 2, 3]
}
})
</script>
component 组件 实际就是自定义标签
<div id='app'>
<my-com></my-com>
<my-com1></my-com1>
</div>
<template id='myCom'>
<div>
<div v-text='msg'></div>
<input type="button" :value="num" @click="plus"></input>
</div>
</template>
<script>
//全局组件
Vue.component('my-com',{
// 如果这里结构太麻烦 要有一个根元素 VUE支持template 见上面
template:'<div>my first component</div>',
data:function(){ // 注意这里是函数
return {
num:0 //注意这里是一个对象
}
},
methods:{
plus:function(){
this.num++;
}
}
})
//局部组件
var Com1 = {
template:'<div style=“color:red;'>test</div>'
}
new Vue({
el:"#app",
components:{
'my-com1':Com1
}
})
</script>
父子组件传值 - props & $emit
父组件向子组件传递数据：在子组件中使用props，值是数组
<child-com msg='hellogirl'></child-com> // 这里也属于父组件
<child-com :msg='gmsg'></child-com> //动态父组件
</div>
<script>
Vue.components('child-com',{
props:['msg'], // 通过props进行传值 ，记得加S哦
template:'<div>{{msg}}</div>',
})
new Vue({
"el":'#app',
data:{
gmsg:'父组件内容'
}
})
</script>
子组件向父组件传递数据 -- 通过$emit基于自定义事件 - 回忆JQ的trigger()事件
<div id='app'>
<div>{{total}}</div>
<child-com v-on:add='handle'></child-com>
<child-com v-on:add='handle'></child-com>
</div>
<script>
Vue.component('child-com',{
template:'<input type="button" :value="num" @click="add"></input>',
data:function(){
return {
num:0
}
},
methods:{
add:function(){
this.num++;
//通知父组件发生变化
this.$emit('add'); //相当于jq中的trigger()方法
}
}
})
new Vue({
'el':"#app",
data:{
total:0
},
methods:{
handle:function(){
this.total++;
}
}
})
</script>
在页面中使用render函数渲染组件
<div id='app'></div>
<script>
var login = {
template: "<h1>这是一个登录组件</h1>"
}
var vm = new Vue({
el:"#app",
render:function(creatElements){
//creatElements这是一个方法
//调用它可以把指定的模板组件，渲染成HTML结构
return creatElements(login)
//这里return的结果，会替换页面中指定的el指定的容器
}
})
</script>
