介绍
前端高级技术
前端一款是有频率很高的框架
原生js中的dom操作太繁琐
所以我们使用了vue框架 可以免除原生js中的dom操作 简化书写
基于MVVM思想
实现了数据的双向绑定 把编程的关注点放在数据上
框架是一个半成品软件 是一套可重用的 通用的 软件基础代码模型
基于框架进行开发 更加快捷 更加高效
配置
参考文档
Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
下载网站
安装 — Vue.js (vuejs.org)
创建文件夹专门放入js文件
在js文件夹中放入vue.js---> 
特性
代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--引入 vue 的标签--> <script src="js/vue.js"></script> </head> <body> <!--编写 视图层 的展示--> <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的--> <!--绑定 数据模型 message 数据模型中的内容会直接展示出来--> <input type="text" v-model="message"> <!--通过一个表达式 代表我们要让数据模型直接展示出来--> {{message}} </div> </body> <script> //定义 vue 对象 new Vue({ el:"#app",//vue 接管 的区域 data:{ message:"Hello Vue" } }) </script> </html>
效果
我们可以
直接将数据模型中的数据展示出来
因为我们使用了v-model这个指令
改变输入框内的数值 后面的展示数值也会变化
因为他们绑定的是同一个数据模型
因为vue的双向绑定性
视图层的数据变化改变数据模型 数据模型变化又会改变视图层的数据展示
常用指令
常用指令1
为html标签绑定属性值
或者是建立双向数据的绑定
代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--引入 vue 的标签--> <script src="js/vue.js"></script> </head> <body> <!--编写 视图层 的展示--> <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的--> <!--创建一个表单 把输入的数据绑定到数据模型上--> <input type="text" v-model="url" > <!--定义一个超链接的标签--> <!--两种书写方式 第二种方式比较简洁--> <a v-bind:href="url">访问</a> <a :href="url">访问</a> </div> </body> <script> //定义 vue 对象 new Vue({ el:"#app",//vue 接管 的区域 //定义数据模型 data:{ url:"http://www.baidu.com" } }) </script> </html>
效果展示
通过v-model 和 v-bind绑定的变量
必须在数据模型中声明
常用指令2
为html标签绑定事件
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--引入 vue 的标签--> <script src="js/vue.js"></script> </head> <body> <!--编写 视图层 的展示--> <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的--> <!--定义一个按钮 代表一个单击事件--> <input type="button" value="点我" v-on:click="handle()"> <input type="button" value="点我" @click="handle()"> </div> </body> <script> //定义 vue 对象 new Vue({ el:"#app",//vue 接管 的区域 //定义数据模型 data:{ url:"http://www.baidu.com" }, methods:{ handle:function(){ alert("为什么点我"); } } }) </script> </html>
两种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--引入 vue 的标签--> <script src="js/vue.js"></script> </head> <body> <!--编写 视图层 的展示--> <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的--> <!--让 vue 接管--> 年龄 <input type="text" v-model="age">经判定 ,为: <span v-if="age<=35">年轻人 (35 岁及以下) </span> <span v-else-if="age>35&&age<60">中年人 (35-60)</span> <span v-else="age>=60">老年人 (60 及以上)</span> <br><br> </div> </body> <script> //定义 vue 对象 new Vue({ el:"#app",//vue 接管 的区域 //定义数据模型 data:{ age:20 }, //定义函数 methods:{ } }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--引入 vue 的标签--> <script src="js/vue.js"></script> </head> <body> <!--编写 视图层 的展示--> <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的--> <!--让 vue 接管--> 年龄 <input type="text" v-model="age">经判定 ,为: <span v-show="age<=35">年轻人 (35 岁及以下) </span> <span v-show="age>35&&age<60">中年人 (35-60)</span> <span v-show="age>=60">老年人 (60 及以上)</span> <br><br> </div> </body> <script> //定义 vue 对象 new Vue({ el:"#app",//vue 接管 的区域 //定义数据模型 data:{ age:20 }, //定义函数 methods:{ } }) </script> </html>
展示的效果一样
区别
v-show渲染的是三个标签而v-if渲染的是选择到的标签
v-show渲染三个标签只不过
是用css里的display属性赋值none来让未满足条件的标签不显示
常用指令4
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--引入 vue 的标签--> <script src="js/vue.js"></script> </head> <body> <!--编写 视图层 的展示--> <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的--> <div v-for="addr in addrs">{{addr}}</div> </div> </body> <script> //定义 vue 对象 new Vue({ el:"#app",//vue 接管 的区域 //定义数据模型 data:{ addrs:["北京","上海","西安","成都","深圳"] }, //定义函数 methods:{ } }) </script> </html>
类似于javase中的lambda表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--引入 vue 的标签--> <script src="js/vue.js"></script> </head> <body> <!--编写 视图层 的展示--> <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的--> <div v-for="(addr ,index) in addrs">{{index}} : {{addr}}</div> </div> </body> <script> //定义 vue 对象 new Vue({ el:"#app",//vue 接管 的区域 //定义数据模型 data:{ addrs:["北京","上海","西安","成都","深圳"] }, //定义函数 methods:{ } }) </script> </html>
展示
个人号推广
博客主页
多多!-CSDN博客
Web后端开发
https://blog.csdn.net/qq_30500575/category_12624592.html?spm=1001.2014.3001.5482
Web前端开发
https://blog.csdn.net/qq_30500575/category_12642989.html?spm=1001.2014.3001.5482
数据库开发
https://blog.csdn.net/qq_30500575/category_12651993.html?spm=1001.2014.3001.5482
项目实战
https://blog.csdn.net/qq_30500575/category_12699801.html?spm=1001.2014.3001.5482
算法与数据结构
https://blog.csdn.net/qq_30500575/category_12630954.html?spm=1001.2014.3001.5482
计算机基础
https://blog.csdn.net/qq_30500575/category_12701605.html?spm=1001.2014.3001.5482
回忆录
https://blog.csdn.net/qq_30500575/category_12620276.html?spm=1001.2014.3001.5482
