vue系列--【vue核心、vue实例、指令】
1.vue初探
官网：https://cn.vuejs.org/
介绍：
vue是渐进式 JavaScript 框架
渐进式 ：主张最少。
优点：
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:
多页面应用
优点：有利于SEO
缺点：会有白屏，用户体验不好
a页面—>a.html
b页面—>b.html
安装：
1.cdn [不推荐]
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.下载vue.js [不推荐]
3.npm [推荐]
npm init
npm i vue
4.脚手架[做项目]
引用：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./vue.js"></script>
<script src="./node_modules/vue/dist/vue.js"></script>
2.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.{{}} 模板语法
<!-- {{}} 模板语法 ，{{}}外面html解析，{{}}里面 js解析 -->
<!-- {{}}只能写1句话 -->
<!-- {{}}非表单元素 eg:div、p、h1-h6 、ul li ... -->
<!-- 变量 -->
<div>{{c}}</div>
<!-- 方法 -->
<div>电话号是：{{tel.slice(0,3)}}****{{tel.slice(7)}}</div>
<!-- 表达式 -->
<div>{{b?'水杯':"电脑"}}</div>
3.指令
非表单元素绑定数据
{{}} 优点：简单方便 缺点：会出现首屏闪屏问题
v-text 优点：可以解决首屏闪屏问题
v-html 优点：可以解析标签
表单元素绑定数据
<input type="text" v-model="name">
属性绑定-媒体元素
<div id="app">
<!-- v-bind: 属性绑定 简写 : -->
<!-- v-bind 不仅可以绑定已知属性，也可以绑定自定义属性 -->
<img v-bind:src="img" alt="">
<a v-bind:href="website.url">
<img v-bind:src="website.logo" alt="">
</a>
<a :href="website.url">
<img :src="website.logo" alt="">
</a>
<div a="1" b="2" :c="name">哈哈哈</div>
</div>
<script>
new Vue({
el: "#app", //挂载点 mount
data: { //属性-数据
name:"妲己",
img:"https://img0.baidu.com/it/u=3026939796,485761977&fm=26&fmt=auto&gp=0.jpg",
website:{
name:"淘宝",
url:"http://taobao.com",
logo:"http://gw.alicdn.com/tfs/TB176rg4VP7gK0jSZFjXXc5aXXa-286-118.png"
}
},
methods: {}
})
</script>
动态类名
<!-- 1. :class="[三元]" -->
<div class="movie">
<!-- 0-blue 1-lime 2-blue 3-lime 4-blue 5-lime -->
<div class="movie-item" v-for="(item,index) in movie"
:class="[index%2==0?'blue':'lime']"
>
<img :src="item.img" alt="">
<div>{{item.name}}</div>
<div>评分：{{item.rate}}</div>
</div>
</div>
<hr>
<!-- 2.:class="{类名1:true,类名2:false,... }" true就会有该类名，false就会没有 -->
<div class="movie">
<!-- 0-blue 1-lime 2-orange 3-blue 4-lime 5-orange
blue:index%3==0
lime:index%3==1
orange:index%3==2
-->
<div class="movie-item" v-for="(item,index) in movie"
:class="{blue:index%3==0,lime:index%3==1,orange:index%3==2}"
>
<img :src="item.img" alt="">
<div>{{item.name}}</div>
<div>评分：{{item.rate}}</div>
</div>
</div>
一次性绑定
v-once
<!-- 一次性数据绑定 -->
<div v-once>{{name}}</div>
事件绑定
<div id="app">
<div>{{name}}</div>
<!-- 事件绑定 v-on:事件名称="方法" -->
<button v-on:click="changeWang()">王昭君</button>
<button v-on:click="changeName('貂蝉')">貂蝉</button>
<button v-on:click="changeName('宫本')">宫本</button>
<button v-on:click="changeName('鲁班')">鲁班</button>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "妲己"
},
methods: {
changeWang() {
this.name = "王昭君";
},
changeName(name) {
this.name = name;
}
}
})
</script>
条件渲染
v-if VS v-show
相同点：true 就出现，false就消失。
不同点：v-if false采用的是惰性加载；v-show false采用的是display:none;
使用场景：频繁切换，建议使用v-show;如果不频繁切换，建议使用v-if.
v-else
<!-- v-else 需要和v-if紧挨着 -->
<div v-if="comments.length>0">评论是：{{comments}}</div>
<div v-else>暂无评论</div>
