介绍
vue是构建用户界面的渐进式 JavaScript 框架
- 故而我们在理解上要专注于“渐进式”三字——主张最少：核心很小，需要什么，安装什么。
五大块核心
指令、组件、路由、状态管理、UI库和第三方插件。
两大核心组成
数据驱动和组件系统 。越了解vue越可以体会到“数据驱动”的真正含义哈哈哈，后面会慢慢普及到。
（这一点万分重要）！！！vue数据驱动可以提高效率，自动监控数据变化，数据变化时让视图自动变化，我们就不用手工做DOM操作,data里的数据是被监控的响应数据,放在object.defineProperty()
优点??
1.轻量级的数据框架
2.双向数据绑定
3.提供了指令
4.组件化开发
5.客户端路由
6.状态管理
缺点
1.Vue 底层基于 Object.defineProperty 实现响应式，而这个 api 本身不支持 IE8 及以下浏 览器，所以Vue不支持IE8及其以下浏览器；
2.Vue 打造的是SPA，所以不利于搜索引擎优化(SEO)；
3.由于 CSR的先天不足，导致首屏加载时间长，有可能会出现闪屏。
理解MVVM模式
M-model模型
V-view视图
VM-viewModel 视图模型
模型（model）通过视图模型决定视图(view)
视图（view）通过视图模型修改模型 (model)?
视图模型是模型和视图之间的桥梁。
理解SPA
single page application，单页面应用。
优点：加载快，用户体验好
缺点：不利于SEO,首屏加载时间长
a页面—>index.html/#/a
b页面—>index.html/#/b
理解MPA
Multi-page Application，多页面应用。
优点：有利于SEO
缺点：会有白屏，用户体验不好
a页面—>a.html
b页面—>b.html
Vue实例
1、如何用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.作用范围 -->
<div id="app">
<div>{{1+1}}</div>
<div>{{2+2}}</div>
</div>
<script>
// 3.实例化vue
new Vue({
el:"#app"
})
</script>
</body>
</html>
2、el
new Vue({
//挂载点 mount-挂载
//1.一个vue对象只能作用在1个节点上，如果el有多个节点满足条件，也只作用在满足条件的第一个节点上。
//2.Do not mount Vue to <html> or <body> - mount to normal elements instead.
// 不要把vue挂到html|body上
// 3.由于一个vue只能作用在一个节点上，所以一般使用id
el:"#app"
})
3、data methods
new Vue({
//挂载点 mount-挂载
el:"#app",
//属性
data:{
a:1,
b:false,
c:"嘻嘻嘻",
tel:"15727273030"
},
//方法
methods:{
fn1(){},
fn2(){},
fn3(){}
}
})
4、{{差值表达式}} js模板引擎，mustache表达式
模板template：含有变量(差值表达式)的HTML
<div id="box"> {{str}} </div>
<script>
// console.log(Vue);
let vm = new Vue({
el:'#box',
data:{
str:'hello world' //响应式数据
}
})
</script>
相关指令
1、v-on
v-on:click="" 简写“@click” ，v-on:click="事件处理函数的名字"
2、v-cloak，该指令生效需要在style声明如下
<style>
[v-cloak]{
display: none;
}
</style>
3、v-text，绑定变量到元素上，解决花括号闪烁问题
4、v-html ， 不但可以绑定变量，还可以渲染html，解析标签
5、v-once ，绑定一次，数据不再变化
<!-- 一次性数据绑定 -->
<div v-once>{{name}}</div>
6、v-bind:value="" 单向数据绑定，简写为“:”，单向的意思是，数据变化，视图会变化；视图变化，数据不会变化
7、v-model="" 双向数据绑定，数据变化，视图会变化 ；视图变化，数据就变化
? ?v-model的修饰符：
（1）.number：输入字符串转为有效数字
（2）.lazy：取代 input 监听 change 事件
（3）.trim：输入首尾空格过滤
8、v-if，条件渲染，值为真才会渲染，下面以分数等级为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="scores">
<!-- {{scores>=60?"及格":"不及格"}} -->
<p v-if="scores>=0 && scores<60">
不及格
</p>
<p v-else-if="scores>=60 && scores<=80 ">
及格
</p>
<p v-else-if="scores>=81 && scores<=90 ">
良好
</p>
<p v-else-if="scores>=91 && scores<=100 ">
优秀
</p>
<p v-else>
数据错误
</p>
</div>
<script>
// v-if v-else-if v-else 条件渲染 惰性的，值为真的时候才渲染
//0--60 不及格 60-80 及格 81-90 良好 91-100 优秀
new Vue({
el:"#box",
data:{
scores:0, //分数
result:"" //分数对应的等级
}
})
</script>
</body>
</html>
9、v-show，本质为切换css属性??false时是设置display为none?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<p v-show="visible">hello world</p>
<button v-on:click="visible=!visible">切换</button>
<input type="checkbox" v-model="visible" />
</div>
<script>
new Vue({
el:"#box",
data:{
visible:true
},
// methods:{
// toggle(){ //切换显示和隐藏
// this.visible=!this.visible
// }
// }
})
</script>
</body>
</html>
10、v-for，相当于循环遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="(item,index) in arr" v-bind:key="item.id">{{item.name}}</li>
</ul>
<button v-on:click="add">add</button>
</div>
<script>
new Vue({
el:"#box",
data:{
arr:[
{
id:1,
"name":"aaa"
},
{
id:2,
"name":"bbb"
},
{
id:3,
"name":'ccc'
},
{
id:4,
"name":"dddd"
}
]
},
methods:{
add(){
this.arr.unshift({
id:Date.now(), //获取当前的时间戳
"name":"cccdsf"
})
}
}
})
</script>
</body>
</html>
?
|