Vue基础介绍,指令,模板使用
1 vue框架（前端js框架） 2 项目（redis，git，短信验证码，celery，项目上线（nginx+uwsgi+django）） 3 爬虫（反扒，cookie池，代理池，分布式爬虫） 4 架构 5 flask（给你几个项目）自动化运维，微电影网站 6 cmdb项目 7 数据分析 8 算法和数据结构 9 go语言（基础到并发编程，web框架（beego，gin）） 10 elasticsearch，mongodb，redis高级，mysql主从，索引优化，分库分表（垂直水平分库分表：mycat），分布式锁，分布式id，双写一致性，地理位置信息，微服务，rpc。。。
-
-
MVVM：Model-View-ViewModel
-
-model：数据（后端给的，js接收到）
-
-ViewModel：中转 （双向数据绑定：js中变量变了，html中数据也跟着变）
-
-view：视图（html+css）
-
-
组件化开发，单页面开发
-
版本：1.x 2.x（用的最多） 3.x（beta版本）
-
下载：（可以使用cdn）
-
-开发版本：
vue.js: -
-
-
前端开发：webstorm，sublinetext，vscode（python，java，go，前端，免费），pycharm（咱们讲课）
-
快速使用
-
补充：解释型语言，需要解释器，js解释器集成到浏览器中了，console就等同于你在cmd小敲python3进的交互式命令行是一样的
-
介绍文本编辑器
本次教程使用编辑器为 webstorm , webstorm下载网上一大把, 自行下载
为达到提示效果, 在插件中心下载Vue插件, 如下图
file--> setting
概述
使用 {{ }}替换值
纯html
表达式
注意：直接把Vue对象赋值给变量，修改变量值，可以直接修改页面内容
-vm.$data.name
-vm.name
1 插值语法 {{ js变量或js语法}}
2 代码演示
1 // 使用方法与js一样, 先导入js文件, 定位使用即可 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>简单替换值</title> 7 <script src="js/vue.js"></script> 8 </head> 9 <body> 10 <div id="box"> 11 <span>我是: {{name}}</span> // 替换位置, 使用{{ 变量 }}替换 12 </div> 13 <script> 14 new Vue({ 15 el: "#box", 16 data: { 17 name: "chen" 18 }, 19 }) 20 </script> 21 </body> 22 </html>
Vue对象解释
-
el: 定位标签位置
-
data: 需要渲染的数据, 这里的数据会渲染到html页面上
学多少介绍多少,OK!
1 标签属性为 v-xx的形式，是vue的指令 2 v-text :标签内容显示js变量对应的值 3 v-html :让html渲染成页面 4 v-show :放一个布尔值，为真，标签就显示，为假标签就不显示 5 v-if :放一个布尔值，为真，标签就显示，为假标签就不显示 6 v-show和v-if 区别：v-show标签还在，不显示了，v-if之间操作的dom把标签删除和加入
例:
解决xss攻击后的文本显示标签,
v-html
1 显示的是纯字符串, 显示标签需要使用v-html方法 2 <body> 3 <div id="box"> 4 <p>{{url}}</p> 5 </div> 6 <script> 7 new Vue({ 8 el: "#box", 9 data: { 10 url:'<a href="http://www.baidu.com">点我看图片</a>' 11 } 12 }) 13 </script> 14 </body> 15 16 例: 17 p标签中加上 v-html, 然后去除模板变量 18 <p v-html="url"></p>
v-text用法
把变量的值渲染到标签中, 跟模板变量渲染是一样的
1 <body> 2 <div id="box"> 3 <span v-text="name">我是span标签</span> 标签中内容将不再显示, 而是显示变量的值 4 <span>{{name}}</span> 5 </div> 6 <script> 7 new Vue({ 8 el: "#box", 9 data: { 10 name: "chen", 11 } 12 }) 13 </script> 14 </body>
v-show 用法 v-if 使用 与 v-show用法一样, 不做一样的例子了
展示和隐藏标签内容, 当v-show为false是会注释掉内容标签
1 <body> 2 <div id="box"> 3 <div v-show="flag">我是div</div> 4 </div> 5 <script> 6 new Vue({ 7 el: "#box", 8 data: { 9 name: "chen", 10 flag: true/false 当为false时div会被隐藏 11 } 12 }) 13 </script> 14 </body>
1 v-on:click=""
以上可以简写为 @ 后期使用@较多
2 不参与事件绑定, 但事件回调方法可以获取时间对象
@click="func"
3 ()可以传入具体参数
@click="func()"
4 ()情况下, 时间对象显示传入值
@click="func($event)"
例点击事件, 点击后消失div内容
1 <body> 2 <div id="box"> 3 <!-- <button v-on:click="Click">点我显示/消失div</button>--> 4 <button @click="Click">点我显示/消失div</button> 5 <div v-show="isShow">我是div</div> 6 </div> 7 <script> 8 new Vue({ 9 el: "#box", 10 data:{ 11 isShow:true 12 }, 13 methods:{ 14 Click(){ 15 this.isShow =! this.isShow // 取反 16 } 17 } 18 }) 19 </script> 20 </body>
@click="func()" 可以传入具体参数
其实也很简单, 相当于函数传参一样, 可以传入多个参数
1 <body> 2 <div id="box"> 3 <button @click="Click(12)">点我显示/消失div</button> 传值给函数 4 <div v-show="isShow">我是div</div> 5 </div> 6 <script> 7 new Vue({ 8 el: "#box", 9 data:{ 10 isShow:true 11 }, 12 methods:{ 13 Click(d){ 14 alert(d) 收到实参后执行区域 15 } 16 } 17 }) 18 </script> 19 </body>
1 <body> 2 <div id="box"> 3 <button @click="Click($event)">点我显示/消失div</button> 4 <div v-show="isShow">我是div</div> 5 </div> 6 <script> 7 new Vue({ 8 el: "#box", 9 data:{ 10 isShow:true 11 }, 12 methods:{ 13 Click(d){ 14 alert(d) 15 } 16 } 17 }) 18 </script> 19 </body>
1 给标签属性的value值绑定成js的变量 2 v-bind:class='js变量' 缩写成 :class='js中变量'
v-bind:class='js变量' 使用, 为了能正常显示图片, 如下
1 <style> 2 .red{ 3 color: red; 4 } 5 .green{ 6 color: lawngreen; 7 } 8 </style> 9 <body> 10 <div id="box"> 11 <img v-bind:src="url" alt=""> // 添加后图片才能正常显示, 否则不加载 12 <button @click="Click">点我变色</button> 13 使用了表达式, 如果为真则选择第一个, 为假选择第二个 14 <div v-bind:class="colors?'red':'green'">我是div</div> 15 </div> 16 <script> 17 new Vue({ 18 el: "#box", 19 data:{ 20 colors:'red', 21 url: "https://gitee.com/cntty/img/raw/first/first/image-20201214185629104.png" 22 }, 23 methods:{ 24 Click(){ 25 this.colors=!this.colors 为真取反 26 } 27 } 28 }) 29 </script> 30 </body>
1 同v-bind控制sytle和class的显示
1 <style> 2 .red{ 3 color: red; 4 } 5 .green{ 6 color: lawngreen; 7 } 8 </style> 9 10 <div id="box"> 11 <button @click="Click">点我变色</button> 12 <div :class="class_obj">我是div</div> 13 </div> 14 <script> 15 new Vue({ 16 el: "#box", 17 data:{ 18 colors:'red', 19 class_obj: "red" 20 }, 21 methods:{ 22 Click(){ 23 this.class_obj="green" // 点击后将class_obj值改为green 24 } 25 } 26 }) 27 </script>
使用style方式改变字体颜色, 值改变颜色, 如需改变颜色和字体大小, 需要使用数组
1 <body> 2 <div id="box"> 3 <button @click="Click">点我变色</button> 4 <div :style="style_obj">我是div</div> 5 </div> 6 <script> 7 new Vue({ 8 el: "#box", 9 data:{ 10 style_obj: { 11 color:"red" // 直接定义颜色, 单个颜色 12 } 13 }, 14 methods:{ 15 Click(){ 16 this.style_obj.color="green" 17 } 18 } 19 }) 20 </script> 21 </body>
使用数组方式
1 <style> 2 .red{ 3 color: red; 4 } 5 .green{ 6 color: lawngreen; 7 } 8 .funt{ 9 font-size: 30px; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="box"> 15 <button @click="Click">点我变色</button> 16 <div :class="class_obj">我是div</div> 17 </div> 18 <script> 19 new Vue({ 20 el: "#box", 21 data:{ 22 class_obj: ["red",], 23 style_obj: { 24 color:"red", 25 fontsize: '15px' 26 } 27 }, 28 methods:{ 29 Click(){ 30 this.class_obj.push('funt') // 添加 31 this.class_obj.pop('funt') // 删除 32 } 33 } 34 }) 35 </script> 36 </body>
解决对象中改变字体大小
1 <body> 2 <div id="box"> 3 <button @click="Click">点我变色</button> 4 <div :style="style_obj">我是div</div> 5 </div> 6 <script> 7 var n = new Vue({ 8 el: "#box", 9 data:{ 10 style_obj: { 11 color:"red", 12 fontSize: '15px' 13 } 14 }, 15 methods:{ 16 Click(){ 17 this.style_obj.color='green' 18 // 改变字体需要使用这种方法, 因为其他方法原来对象中值没有发生改变, 不会刷新 19 Vue.set(n.style_obj,'fontSize','30px') 20 } 21 } 22 }) 23 </script> 24 </body>
