地址:https://code.visualstudio.com/
安装以下组件:
(1)下载地址:https://github.com/vuejs/devtools
(2)下载后解压,cmd到解压目录,执行npm install
如果在E盘,cmd输入e:,让后cd到路径
或者直接在devtools-main解压目录输入cmd,回车
(3)执行npm run build,新版本使用npm run build报错
(4)安装yarn
npm install -g yarn
(5)使用前更换淘宝镜像
yarn config set registry https://registry.npm.taobao.org --global yarn config set disturl https://npm.taobao.org/dist --global yarn config get registry (如果上面配置正确这个命令会输出淘宝镜像地址)
(6)配置插件
yarn install
中间失败了一次,又执行了一次就成功了
yarn run build
<!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> </head> <body> <div id="app"> <p>前面的内容如果网速慢的话会先显示括号,然后才替换成数据。 v-html 和v-text能解决这个问题</p> {{msg}} {{1+1}} {{hello()}} <p>用v-html取内容</p> <p><span v-html="msg"></span></p> <p>用v-text取内容</p> <p><span v-text="msg"></span></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ msg:"<h1>Hello</h1>", link:"http://www.baidu.com" }, methods:{ hello(){ return "World" } } }); </script> </body> </html>
v-bind:,简写为:。表示把model绑定到view。可以设置src、title、class等
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
<!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> </head> <body> <div id="app"> <a v-bind:href="link">跳转</a> <!-- class,style {class名:vue值}--> <span v-bind:class="{active:isActive,'text-danger':hasError}" :style="{color: color1,fontSize: size}">你好</span> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { link: "http://www.baidu.com", isActive: true, hasError: true, color1: "red", size: "36px", }, methods: {}, }); </script> </body> </html>
v-model双向绑定,v-bind只能从model到view。v-model能从view到mode
<!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> </head> <body> <div id="app"> 精通的语言: <input type="checkbox" v-model="language" value="Java" /> Java<br /> <input type="checkbox" v-model="language" value="PHP" /> PHP<br /> <input type="checkbox" v-model="language" value="Python" /> Python<br /> 选中了 {{language.join(",")}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { language:[] } }); </script> </body> </html>
事件监听可以使用 v-on 指令
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。
Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
<!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> </head> <body> <div id="app"> <!--事件中直接写js片段--> <button v-on:click="num++">点赞</button> <!--事件指定一个回调函数,必须是Vue实例中定义的函数--> <button @click="cancel">取消</button> <!-- --> <h1>有{{num}}个赞</h1> <!-- 事件修饰符 --> <div style="border: 1px solid red; padding: 20px" v-on:click.once="hello"> 大div <div style="border: 1px solid blue; padding: 20px" @click.stop="hello"> 小div <br /> <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a> </div> </div> <!-- 按键修饰符: --> <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10" /><br /> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ num: 1 }, methods:{ cancel(){ this.num--; }, hello(){ alert("点击了") } } }); </script> </body> </html>
可以遍历 数组[] 字典{} 。对于字典 v-for="(value, key, index) in object
<!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> </head> <body> <div id="app"> <ul> <!-- 4、遍历的时候都加上:key来区分不同数据,提高vue渲染效率 --> <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'"> <!-- 1、显示user信息:v-for="item in items" --> 当前索引:{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br> <!-- 2、获取数组下标:v-for="(item,index) in items" --> <!-- 3、遍历对象: v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object" --> 对象信息: <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}};</span> <!-- 4、遍历的时候都加上:key来区分不同数据,提高vue渲染效率 --> </li> </ul> <ul> <li v-for="(num,index) in nums" :key="index"></li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { users: [ { name: '柳岩', gender: '女', age: 21 }, { name: '张三', gender: '男', age: 18 }, { name: '范冰冰', gender: '女', age: 24 }, { name: '刘亦菲', gender: '女', age: 18 }, { name: '古力娜扎', gender: '女', age: 25 } ], nums: [1,2,3,4,4] }, }) </script> </body> </html>
v-if元素会被引出,v-show只是隐藏
<!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> </head> <body> <!-- v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。 v-show,当得到结果为true时,所在的元素才会被显示。 --> <div id="app"> <button v-on:click="show = !show">点我呀</button> <!-- 1、使用v-if显示 --> <h1 v-if="show">if=看到我....</h1> <!-- 2、使用v-show显示 --> <h1 v-show="show">show=看到我</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { show: true } }) </script> </body> </html>
<!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> </head> <body> <!-- v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。 v-show,当得到结果为true时,所在的元素才会被显示。 --> <div id="app"> <button v-on:click="show = !show">点我呀</button> <!-- 1、使用v-if显示 --> <h1 v-if="show">if=看到我....</h1> <!-- 2、使用v-show显示 --> <h1 v-show="show">show=看到我</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { show: true } }) </script> </body> </html>
什么是计算属性:属性不是具体值,而是通过一个函数计算出来的,随时变化
<!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> </head> <body> <div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { message: "Runoob!", }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split("").reverse().join(""); }, }, }); </script> </body> </html>
监听属性 watch,我们可以通过 watch 来响应数据的变化。
<!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> </head> <body> <div id="app"> <p style="font-size: 25px">计数器: {{ counter }}</p> <button @click="counter++" style="font-size: 25px">点我</button> <br /> <!-- 某些结果是基于之前数据实时计算出来的,我们可以利用计算属性。来完成 --> <ul> <li> 西游记; 价格:{{xyjPrice}},数量:<input type="number" v-model="xyjNum" /> </li> <li> 水浒传; 价格:{{shzPrice}},数量:<input type="number" v-model="shzNum" /> </li> <li>总价:{{totalPrice}}</li> {{msg}} </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { counter: 1, xyjPrice: 99.98, shzPrice: 98.0, xyjNum: 1, shzNum: 1, msg: "", }, computed: { totalPrice() { return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum; }, }, watch: { xyjNum: function (newVal, oldVal) { if (newVal >= 3) { this.msg = "库存超出限制"; this.xyjNum = 3; } else { this.msg = ""; } }, }, }); vm.$watch("counter", function (nval, oval) { // new old alert("计数器值的变化 :" + oval + " 变为 " + nval + "!"); }); </script> </body> </html>
<!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> </head> <body> <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 --> <div id="app"> <ul> <li v-for="user in userList"> {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==> {{user.gender | genderFilter}} ==> {{user.gender | gFilter}} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> // 全局过滤器 Vue.filter("gFilter", function (val) { if (val == 1) { return "男~~~"; } else { return "女~~~"; } }) let vm = new Vue({ el: "#app", data: { userList: [ { id: 1, name: 'jacky', gender: 1 }, { id: 2, name: 'peter', gender: 0 } ] }, filters: { // 局部过滤器,只可以在当前vue实例中使用 genderFilter(val) { if (val == 1) { return "男"; } else { return "女"; } } } }) </script> </body> </html>
<!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> </head> <body> <div id="app"> <button v-on:click="count++">我被点击了 {{count}} 次</button> 每个对象都是独立统计的 <counter></counter> <counter></counter> <counter></counter> <counter></counter> <counter></counter> <button-counter></button-counter> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> //1、全局声明注册一个组件 // counter标签,代表button // 把页面中<counter>标签替换为指定的template,而template中的数据用data填充 Vue.component("counter", { template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`, data() { // 如果 Vue 没有这条规则,点击一个按钮就可能会像如下代码一样影响到其它所有实例: return { count: 1, // 数据 }; }, }); //2、局部声明一个组件 const buttonCounter = { template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`, data() { return { count: 1, }; }, }; let vm = new Vue({ el: "#app", data: { count: 1, }, methods: {}, }); </script> </body> </html>
每个vue实例在被创建时都要经过一系列的初始化过程:创建实例,装载模板、渲染模板等等。vue为生命周期中的每个状态都设置了钩子函数(监听函)。每当vue实列处于不同的生命周期时,对应的函数就会被触发调用。
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <span id="num">{{num}}</span> <button @click="num++">赞!</button> <h2>{{name}},有{{num}}个人点赞</h2> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { name: "张三", num: 100 }, methods: { show() { return this.name; }, add() { this.num++; } }, beforeCreate() { console.log("=========beforeCreate============="); console.log("数据模型未加载:" + this.name, this.num); console.log("方法未加载:" + this.show()); console.log("html模板未加载:" + document.getElementById("num")); }, created: function () { console.log("=========created============="); console.log("数据模型已加载:" + this.name, this.num); console.log("方法已加载:" + this.show()); console.log("html模板已加载:" + document.getElementById("num")); console.log("html模板未渲染:" + document.getElementById("num").innerText); }, beforeMount() { console.log("=========beforeMount============="); console.log("html模板未渲染:" + document.getElementById("num").innerText); }, mounted() { console.log("=========mounted============="); console.log("html模板已渲染:" + document.getElementById("num").innerText); }, beforeUpdate() { console.log("=========beforeUpdate============="); console.log("数据模型已更新:" + this.num); console.log("html模板未更新:" + document.getElementById("num").innerText); }, updated() { console.log("=========updated============="); console.log("数据模型已更新:" + this.num); console.log("html模板已更新:" + document.getElementById("num").innerText); } }); </script> </body> </html>
(1)全局安装webpack
npm install webpack -g
(2)全局安装vue脚手架
npm install -g @vue/cli-init
(3)初始化Vue项目
vue init webpack 项目名称
(4)启动vue项目
npm run start
官网:https://element.eleme.cn/#/zh-CN
(1)安装 element-ui
npm i element-ui
(2)引入Element-UI
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
(3)把elementUi的container布局容器代码拷到App.vue中
(4)修改App.vue中的
(5)路由配置
export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/hello', name: 'Hello', component: Hello }, { path: '/table', name: 'MyTable', component: MyTable } ] })
(6)el-menu设置router,并添加跳转路由