vue介绍
尤雨溪(vue) [阿里] 3.0
渐进式 JavaScript 框架
渐进式：主张最少
在一个库和一套完整框架之间自如伸缩。
优点：
1.轻量级的数据框架 2.双向数据绑定 3.提供了指令 4.组件化开发 5.客户端路由 6.状态管理 缺点：
1.Vue 底层基于 Object.defineProperty 实现响应式，而这个 api 本身不支持 IE8 及以下浏 览器，所以Vue不支持IE8及其以下浏览器； 2.Vue 打造的是SPA，所以不利于搜索引擎优化(SEO)； 3.由于 CSR（client server render）的先天不足，导致首屏加载时间长，有可能会出现闪屏。 核心：
数据驱动 组件系统 兼容：
Vue 不支持 IE8 及以下版本。
SPA
single page application 单页面应用
http://baidu.com/#index index.html v-text|v-html http://baidu.com/#login index.html http://baidu.com/#register index.html http://baidu.com/#course index.html {{}} 优点： 用户体验好 服务器压力小 缺点： 首屏加载时间长 不利于SEO优化 MPA
multiple page application 多页面应用
http://ujiuye.com/1 index.html http://ujiuye.com/2 2.html http://ujiuye.com/3 3.html 优点： 有利于SEO优化 缺点： 会有白屏，用户体验度不好 服务器压力大 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> 2..npm
npm i vue --save vue.js[有报错提醒] vue.min.js[没有报错提醒]
3.脚手架
1.引入
2.挂载点
<div id="box"> <div class="app"> <h3>{{2+2}}</h3> </div> <div class="app"> <h3>{{1+1}}</h3> </div> </div> 3.实例化
new Vue({ el:"#box" }) 1.el可以是任意的css选择器 2.一个vue对象，只能挂载到一个节点上，如果你的el有好几个满足条件，也只挂到满足条件的第一个节点上 3. 报错Do not mount Vue to <html> or <body> - mount to normal elements instead. // mount挂载 // el不要挂载到html|body,挂载到正常的元素上 4.el最好挂载到一个id选择器上 data and methods
// 3.实例化一个Vue对象(属性和方法) new Vue({ el: "#app", //挂载点 //属性:页面需要的变量 data: { name: "妲己", sex: "女", age: 20 }, //方法：页面需要函数 methods: { changeName() { this.name = "王昭君" }, changeAge() { this.age = 30; } } }) html
<!-- 2.定义一个挂载点 --> <div id="app"> <!-- vue根本就不关心DOM节点 --> <!-- 数据变了，页面自己就变了，叫：数据驱动 --> <h3>{{name}}</h3> <h3>{{sex}}</h3> <h3>{{age}}</h3> <!-- 变量，一定是先声明，后使用 --> <!-- <h3>{{aa}}</h3> --> <button @click="changeName()">王昭君</button> <button @click="changeAge()">age=30</button> </div> 模板语法 {{}}
// 3.实例化 new Vue({ el:"#app", data:{ name:"妲己", price:20.00, arr:[], course:{ title:"暑假班", price:199, time:"202109月10日-2021年12月10日" } }, methods:{} }) 语法：
<!-- {{}} 内部按照js解析，{{}}的语法要满足js的写法 --> <h3>{{1+1}}</h3> <h3>{{name}}</h3> <h3>姓名：{{name}}</h3> <h3>{{'姓名：'+name}}</h3> <!-- 方法ok --> <h3>价格：{{price.toFixed(2)}}</h3> <!-- 三目运算 --> <h3>{{arr.length===0?'暂无数据':'有数据'}}</h3> <!-- {{}}里面只能写一句js语句 --> 6.vue指令
指令：以v-开头写在属性的位置上
指令目的：绑定数据。
标签; 表单元素：input textarea [value val()] 非表单元素：div span li [innerHTML html()] 媒体元素：img video audio [src attr("src","1")] {{}} v-text v-html 区别
{{}} : 优点：简单 缺点：不能解析标签，首屏会出现闪屏问题 v-text: 优点：首屏不会出现闪屏问题 缺点：不能解析标签，不方便 v-html: 优点：解析标签，首屏不会出现闪屏问题 缺点:不方便 由于vue打造的是SPA，首屏加载慢，vue可能未加载完成，所以不建议使用{{}},使用v-text;其他的路由，使用{{}}。 商品详情页往往使用v-html.
v-text
<div id="app"> <!-- 非表单元素 div span li ... --> <!-- v-text="值" 值需要满足js的语法 --> <div v-text=name></div> <div v-text="age"></div> <div v-text="sex"></div> <div v-text="'姓名：'+name"></div> <div v-text="name"></div> <!-- <hr> --> <div v-text="str"></div> </div> <script> new Vue({ el:"#app",//挂载点 挂载：mount data:{//属性 name:"妲己", age:20, sex:"女", str:"<strong><em>这是一个标签</em></strong>" }, methods:{//方法 } }) </script> v-html
<div id="app"> <!-- 非表单元素 div span li ... --> <!-- v-html="值" 值需要满足js的语法 --> <div v-html=name></div> <div v-html="age"></div> <div v-html="sex"></div> <div v-html="'姓名：'+name"></div> <div v-html="name">哈哈哈</div> <hr> <div v-html="str"></div> </div> <script> new Vue({ el:"#app",//挂载点 挂载：mount data:{//属性 name:"妲己", age:20, sex:"女", str:"<strong><em>这是一个标签</em></strong>" }, methods:{//方法 } }) </script> v-model
<div id="app"> <h3>表单元素</h3> <!-- input[type="text"] select textarea --> <!-- 数据驱动 v-model:data的数据决定了页面展示的内容；用户在页面通过v-model修改了nickname，data数据变了，页面重新渲染。 --> <div>姓名： <input type="text" v-model="nickname"></div> <div>生日：<input type="date" v-model="birthday"></div> <h3>{{nickname}}</h3> </div> <script> new Vue({ el:"#app", data:{ nickname:"uu", birthday:"2021-10-10" } }) </script> v-bind，简写为 :
<!-- v-bind:属性名="属性值" v-bind可以简写为 : --> <img v-bind:src="img" alt=""> <img v-bind:src="ava" alt=""> <a v-bind:href="website.url"> <img v-bind:src="website.logo" alt="" v-bind:title="website.name"> </a> <a href="http://baidu.com">百度</a> <a :href="website.url"> <img :src="website.logo" alt="" :title="website.name"> </a> <!-- v-bind还可以绑定自定义属性 --> <div :aa="website.name">测试属性绑定</div> v-if
<!-- v-if="boolean" true出现，false消失 --> <h3 v-if="true">天道酬勤</h3> <h3 v-if="false">人道酬善</h3> v-else
<!-- v-else 必须和v-if紧挨着--> <div v-if="comments.length>0">{{comments}}</div> <div v-else>暂无数据</div> v-else-if
<!-- v-else-if 必须和v-if紧挨着 --> <!-- >=90 优秀 60-90及格 <60 不及格 --> <div>等级： <span v-if="score>=90">优秀</span> <span v-else-if="score>=60">及格</span> <span v-else>不及格</span> </div> v-show
<!-- v-show="boolean" true出现，false消失 --> <h3 v-show="true">天道酬勤</h3> <h3 v-show="false">人道酬善</h3> v-if VS v-show
相同点：true 显示，false隐藏。 不同点：在false情况下，v-if 采用的是惰性加载；v-show采用的是添加display:none。 使用场景：如果用户频繁切换的话，建议使用v-show;如果切换不频繁的话，建议使用v-if. v-on ： 简写@
<div id="app"> <!-- v-on:事件名="方法" v-on可以简写为@--> <button v-on:click="fn()">点击试试</button> <button @click="fn()">点击试试</button> <!-- 参数 --> <button @click="add(3,5)">3+5</button> <button @click="add(10,30)">10+30</button> </div> <script> new Vue({ el: "#app", data: {}, methods: { fn() { console.log("建设生态文明"); }, add(a, b) { console.log(a + b); } } }) </script> v-once 【了解】
<!-- 一次性渲染，第一次name会被渲染，后期name变了，页面不再重新渲染新数据 --> div v-once>姓名：{{name}}</div> 语法：
v-for="(item,index) in arr" item是数组的每一项，index是每一项的下标
<li v-for="(item,index) in comments">{{item}}</li> 案例：
<div id="app"> <ul> <!-- v-for="(item,index) in arr" item是数组的每一项，index是每一项的下标. --> <li v-for="(item,index) in comments">{{item}}</li> </ul> <div class="course"> <!-- 如果只用到item,不用下标，可以省略下标 --> <div class="every" v-for="item in course"> <h3>名称：{{item.title}}</h3> <div>价格： <span v-if="item.price!=0">{{item.price.toFixed(2)}}元</span> <span v-else>免费学习</span> </div> </div> </div> </div> <script> new Vue({ el:"#app", data:{ //评论 comments:["物美价廉","很好吃","很好"], //课程 course:[ { id:1, title:"暑假班", price:200, }, { id:2, title:"数学特长班", price:199, }, { id:3, title:"疯狂物理", price:299, }, { id:4, title:"疯狂物理2", price:0 }, ] } }) </script> 1.变量方式
语法：
<!-- 1. :class="变量" 不常用 --> <div class="blue" :class="bg">香港国安法，你支持吗？</div> 案例：
<button @click="changeBg('red')">red</button> <button @click="changeBg('orange')">orange</button> <button @click="changeBg('yellow')">yellow</button> <!-- 1. :class="变量" 不常用 --> <div class="blue" :class="bg">香港国安法，你支持吗？</div> new Vue({ el: "#app", data: { bg: "red", }, methods: { changeBg(bg) { this.bg = bg; } } }) 2.数组[三元表达式]
语法：
<!--2. :class="[三元判断]" --> <div :class="[isRed?'red':'orange']">绿水青山就是金山银山</div> 案例：
<button @click="isRed=true">red</button> <button @click="isRed=false">orange</button> <!--2. :class="[三元判断]" --> <div :class="[isRed?'red':'orange']">绿水青山就是金山银山</div> <script> new Vue({ el: "#app", data: { isRed:false, } }) </script> 案例;
1.隔行变色 2.导航 3.对象方式
语法：
<!-- 语法 :class="{类名1::true,类名2::false,.....}"--> <div :class="{'red':true,'yellow':false,'orange':1==1,'lime':isTrue}">业精于勤荒于嬉</div> 案例：
三行一变色
<!-- 案例 --> <div class="course"> <!-- 0-red 1-orange 2-yellow 3-red 4-orange 5-yellow ... red:0 3 6 index%3==0 orange:1 4 7 index%3==1 yellow:2 5 8 index%3==2 --> <div class="every" v-for="(item,index) in course" :class="{'red':index%3==0,'orange':index%3==1,'yellow':index%3==2}"> <h3>课程名称：{{item.title}}</h3> <div>价格： <span v-if="item.price!=0">{{item.price}}元</span> <span v-else>免费学习</span> </div> </div> </div> <script> new Vue({ el: "#app", data: { isTrue: true, //课程 course: [{ id: 1, title: "暑假班", price: 200, }, { id: 2, title: "数学特长班", price: 199, }, { id: 3, title: "疯狂物理", price: 299, }, { id: 4, title: "疯狂物理2", price: 0 }, { id: 1, title: "暑假班", price: 200, }, { id: 2, title: "数学特长班", price: 199, } ], }, }) </script> 语法：
<!-- 动态行间样式 :style="json" --> <div :style="{background:'pink'}">今天周五</div> 案例:
<!-- 案例 --> <div class="course"> <div class="every" v-for="(item,index) in course" :style="{background:item.color}"> <h3 >名称：{{item.title}}</h3> <div>价格： <span v-if="item.price!=0">{{item.price.toFixed(2)}}元</span> <span v-else>免费学习</span> </div> </div> </div> <script> new Vue({ el: "#app", data: { //课程 course:[ { id:1, title:"暑假班", price:200, color:"red" }, { id:2, title:"数学特长班", price:199, color:"orange" }, { id:3, title:"疯狂物理", price:299, color:"yellow" }, { id:4, title:"疯狂物理2", price:0, color:"green" }, { id:1, title:"暑假班", price:200, color:"lime" }, { id:2, title:"数学特长班", price:199, color:"blue" } ], }, }) </script>原文链接：https://blog.csdn.net/qq_48294048/article/details/120799054?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918469516781647515574%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918469516781647515574&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-19-120799054-null-null.nonecase&utm_term=%E9%A6%99%E6%B8%AFcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/5015
