VUE框架的核心理念：数据驱动、组件化
数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom
例如：需求我们点击一个BUTTON按钮，需要按钮（文本）进行start和stop的切换
（JS原生）：
var demo = document.getElementById('demo')
demo.onclick = function() {
if (this.value == "开始") {
this.value = "停止";
console.log("开始了")|请注意→
} else {
this.value = "开始";
console.log("停止了")
}
}
（#注意#VUE项目里不能写JS原生和Jquery！）
·原生需要对button绑定事件，然后获取文案对应的元素dom对象，然后根据切换修改该dom对象的文案值。
·Vue：在button元素上指明事件，同时声明对应文案的属性，点击事件的时候改变属性的值，对应元素的文本就能够自动的进行切换
vuejs帮我们封装了数据和dom对象操作的映射，我们只需要关心数据的逻辑处理，数据的变化就能够自然的通知页面进行页面的重新渲染。
vue项目的实现是基于MVVN架构实现的
（mvvm机构包括）：
·Model --数据--JavaScript对象
·View --视图--就是所见的DOM
·viewModel --链接视图和数据的中间件#通讯
架构运行逻辑：
View <-> viewModel <->model
在MVVM框架中不允许数据和底层的视图直接通讯的
只能通过viewModel通讯（我的作用就是定义OBserver观察者）
流程：
·数据变化时（ViewModel监听），把（底层逻辑）视图对应的内容进行更新
（例如倒计时结束后，某一JS逻辑终止）
·而用户操作（底层逻辑）视图时，（ViewModel监听）通知数据改变
（例如用户操作了点击购物车增加了一件商品）
vue结构：
任何Vue程序都需要至少一个Vue实例对象，然后在内部设置各种属性和方法，以及生命周期的控制。
==============
vue实例对象
Var vm = new Vue({
//选项
})
在实例化VUE时，需要传入一个选项对象（包含数据、模板挂载元素、方法、生命周期钩子）
El对应的标签根结点
Var vm = new Vue({
El: 'app'
})
el用来放置一个选择器，控制能够管理的范围！
data对象
Var vm = new vue({
El: '#app',
Data:{
Message: hello vue'
}
})
将来页面上绑定的数据就是data里的数据
VUE会代理其data对象的所有属性（vue代理属性是怎么实现的？）
答：
Vm.message = 'aaa'；//可以直接使用实例对象调用data中的属性进行操作
Vm.$data.message = 'bbb'; //这样也可以操作data中的属性vm.$data就是data对象
以上用法是通过vue实例内置的属性和方法来操作data，为了区分自己的属性，要加$
Methods
Var vm = new vue({
El: '#app',
Data:{
Message: hello vue'
}，
Methods:{
Test1:function(){
Console.log(this);
},
//建议写法：
Test2(){
console.log(this)；
}
}
})
methods是方法，只要调用它，函数就会执行。
当data中对应数据发生改变时，methods里的值也会产生变化
只需要直接调用即可vm.test1(); //vm.test2()
文本插值
#一定需要有返回值
{{ 10 + 20 }} // {{Math.random() > 0.5}}
指令
带有v-前缀的特殊属性。指令属性的值预期是单个JavaScript表达式
当表达式的值（数据发生变化），（响应式的）作用于DOM
1.V-text
更新元素的textContent。如果需要更新部分的textContent，还需要使用到{{}}插值
先在data中声明：Message = "hello"
使用text最好使用这种方式！不要直接在text里写！
// hello
测试//hello
{{ message }}// hello
哈哈//哈哈
总结，只要设置v-text，那么元素一定会被替换成指定的文本。
1.V-model
双向数据绑定，一般用于部分表单控件
（输入框输入什么，上面应的部分也显示/删除什么）
1.V-once
只渲染元素和组件一次。随后的重新渲染，元素/组件以及所有的子节点将会被视为静态内容并且跳过。可以用于优化更新性能。
也就是说。只要被VUE使用过的内容，下一次VUE其他指令将对他无效！
4. v-bind
如果是属性绑定的话，那么使用v-bind
豆瓣电影
测试
#在这里titel:里可以指定字符串！
→→→→→→→→→→→→→→→→→→→→→→→→→→→→
！5.v-show
根据表达式的（true / false），切换元素的display CSS属性。
#案例分析
# -选择按钮-文本内容是开始-onclick时调用（methods）里的函数
# v-show
1.通过（methods）函数调用时产生变化时
2.判断isShow的布尔值true和false .
3.从而驱动页面视图来完成对页面元素CSS状态的动态变化
varvm= newVue({
el:"#app",
data:{
isShow: false,
},
methods:{
toggle:function() {
this.isShow= !this.isShow
#当点击事件触发的时候，isShow为true
}
}
});
V-指令之流程控制！
1.V-if:
1.v-if完全根据表达式的值在DOM中生成或移除一个元素。
2.如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；
3.否则，对应元素的一个克隆将被重新插入DOM中。
4.如果元素是,那么将提出它的内容荣作为条件块
·V- if和v- show不同的是
·v-if是真实的创建和销毁元素
·V-show是CSS属性的变化，但是元素还是一直存在的
v-if判断
第一个
第二个
第三个
varvm= newVue({
el:"#app",
data:{
isShow: false,
if_flag: true
},
methods:{
zhaqi:function() {
this.if_flag= !this.if_flag
}
}
});
===============================================================
2.v-else
第一个
第二个
第三个
意思是
·只要结果是true那么IF的条件块就会出现
·但是如果结果是false那么else的条件块会出现，IF的就会消失！
3.v-else-if
W
RL
J
freedom
·如果IF条件符合，就生成W
·一直到都不符合，生成freedom
For循环
1.渲染列表，必须使用特定语法：
’变量‘in ’列表‘
{{ tab.text}}
==============
varvm= newVue({
el:"#app",
data:{
tabs:[{
text:'第一个'
}, {
text:'第二个'
}, {
text:'第三个'
}]
}
});
2.渲染对象
#循环数组里的内容和下标
#判断下标是第二个对象
#输出对象的“icon”属性
{{ item.icon }}
#青岛大学
var vm = new Vue({
el: "#app",
data: {
demo_class: [{
"name": "2017年12月5日",
"icon": "上海大学",
"time": "金融",
"type": "陆家嘴"
}, {
"name": "2017年12月9日",
"icon": "青岛大学",
"time": "计算机",
"type": "浦东"
}]
}
});
=========
3循环嵌套
#经典案例—九九乘法表实现循环
{{ i+"*"+j+"="+(i*j) }}
# div是一行（因为是行内块）
# span是行内自动排列（因为是行内元素）
#I in 9 (这里的9，VUE默认为1-9)
4.v-on点击事件
事件绑定，事件触发的方法需要使用VUE实例中定义methods属性
这里可以简写：
< inputtype="button" value="text" @click="data中触发的方法" />
也可以直接写JS表达式：
< inputtype="button" value="可以直接写计算模式" @click="isShow=! isShow" />
网友评论