Vue_基础(1)
目录
es6的基本语法
Vue的使用
Vue的MVVM思想
前戏
es6的基本语法
1. let 与 var 的区别
let ：特点： 1.a是局部作用域,{let代码块内部生效,外部不能使用这个变量} if (1){ let b = 'xxx'; } console.log(b);报错 if (1){ var a = 'xxx'; } console.log(a); //xxx 可以使用,但是函数不行 2.不存在变量提升 console.log(xx); //undefined var xx = 'oo'; console.log(xxx); //报错 let xxx = 'ooo'; 3.不能重复声明（var可以重复声明）4 let声明的全局变量不从属于window对象，var声明的全局变量从属于window对象。 var a = 'xx' let a = 'oo'//报错
关于第4个特点的简单说明： ES5声明变量只有两种方式：var和function。 ES6有let、const、import、class再加上ES5的var、function共有六种声明变量的方式。 还需要了解顶层对象：浏览器环境中顶层对象是window. ES5中，顶层对象的属性等价于全局变量。var a = 10; window.a ES6中，有所改变：var、function声明的全局变量，依然是顶层对象的属性；let、const、class声明的全局变量不属于顶层对象的属性，也就是说ES6开始，全局变量和顶层对象的属性开始分离、脱钩，目的是以防声明的全局变量将window对象的属性造成污染，因为window对象是顶层对象，它里面的属性是各个js程序中都可以使用的，不利于模块化开发，并且window对象有很多的自有属性，也为了防止对window的自由属性的污染，所以在ES6中将顶层对象和全局变量进行隔离。 举例： var a = 1; console.info(window.a); // 2 let b = 2; console.info(window.b); //undefined // var a; -- undefined console.log(a); -- undefined var a = 10; var b = '景顺'; console.log(c); -- 报错 let c = '谢景顺'； # const 声明一个常量 const ：特点： 1.局部作用域 2.不存在变量提升 3.不能重复声明 4.一般声明不可变的量 const pi = 3.1415926; //pi = 'xx' -- 报错 模板字符串：tab键上面的反引号，${变量名}来插入值 类似于python的三引号 """adfadsf"""，可以写多行文本 另外还可以通过它来完成字符串格式化 示例： let bb = 'jj'; var ss = `你好${bb}`; console.log(ss); -- '你好jj'
es5全局和局部变量和作用域
函数的全局变量和局部变量 局部变量： 在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。 全局变量： 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。 变量生存周期： JavaScript变量的生命期从它们被声明的时间开始。 局部变量会在函数运行以后被删除。 全局变量会在页面关闭后被删除。 作用域 首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。
2.es5和es6的函数对比
//ES5写法 function add(x){ return x } add(5); //匿名函数 var add = function (x) { return x }; add(5); //ES6的匿名函数 let add = function (x) { return x }; add(5); //ES6的箭头函数,就是上面方法的简写形式 let add = (x) => { return x }; console.log(add(20)); //更简单的写法，但不是很易阅读 let add = x => x; console.log(add(5)); 多个参数的时候必须加括号，函数返回值还是只能有一个，没有参数的，必须写一个() let add = (x,y) => x+y;
3. es5和es6的类写法对比
es5
// es5类的写法 function Person(name, age){ //封装属性 this.name = name this.age = age } // 封装方法 Person.prototype.f1 = function(){ console.log(this.name) // this指的就是Person对象 } // 封装方法, 箭头函数的形式写匿名函数 Person.prototype.f2 = ()=>{ console.log(this); // this指的是window对象 }; // 实例化一个对象 var p1 = new Person('妹妹',18); p1.age // 18 p1.f1() // 妹妹 p1.f2() // window对象
其实在es5我们将js的基本语法的时候，没有将类的继承，但是也是可以继承的，还记得吗，那么你想，继承之后，我们是不是可以通过子类实例化的对象调用父类的方法啊，当然是可以的，知道一下就行了，我们下面来看看es6里面的类怎么写
es6
// es6的类的写法 class Person2{ constructor(name,age){ // 封装属性 this.name = name; this.age = age; } showname(){ // 封装方法 console.log(this.name) } showage(){ console.log(this.age) } } let p2 = new Person2('小姐姐', 16) p2.showname() // 调用方法
Vue的基本使用
现在我们就先来学习一下Vue2.x版本的使用
第一个实例
打印一个hello world
<body> <div id="app"> <h2>{{message}}</h2> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', // 划分作用的区域 data: { message:'hello world!', } }) </script>
data的三种写法
let vm = new Vue({ el: '#app', // 划分作用的区域 // data的写法一 data: { message:'hello world!', } // data的写法二 data:function (){ return { message: 'hello world!' } } //data的写法三 (推荐/单体模式) data(){ return{ message: 'hello world!' } } })
详细介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <!-- {{ message }} 表示把vue对象里面data属性中的对应数据输出到页面中 --> <!-- 在双标签中显示数据要通过{{ }}来完成 --> <p>{{ message }}</p> </div> </body> <script> // vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始。 let vm = new Vue({ el:'#app', // 设置当前vue对象要控制的标签范围。 // data属性写法方式1 data:{ // data是将要展示到HTML标签元素中的数据。 message: 'hello world!', } // 方式2 // data:function () { // return { // 'msg':'掀起你的盖头来1！' // } // } data(){ // 单体模式 这种写法用的居多，并且后面学习中有个地方一定要这样写，所以我们就记下来这种写法就可以了 return { 'msg':'掀起你的盖头来2！', } } }); </script> </html>
Vue的MVVM思想
MVVM
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
`Model` 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
`View` 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。
`ViewModel ` 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中h标签中就是vm对象自动完成的。
编写代码，让我们更加清晰的了解MVVM：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.min.js"></script> <script> window.onload = function(){ // 创建vm对象 var vm = new Vue({ el: "#app", data: { name:"大标题", age:16, }, }) } </script> </head> <body> <div id="app"> <!-- 在双标签中显示数据要通过{{ }}来完成 --> <h1>{{name}}</h1> <p>{{age}}</p> <!-- 在表单输入框中显示数据要使用v-model来完成，模板语法的时候，我们会详细学习 --> <input type="text" v-model="name"> </div> </body> </html>
在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据
console.log(vm.$el) # #app vm对象可以控制的范围 console.log(vm.$data); # vm对象要显示到页面中的数据 console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.
总结:
1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }} 用法： vue对象的data属性： data:{ name:"小明", } 标签元素： <h1>{{ name }}</h1> 2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model 用法： vue对象的data属性： data:{ name:"小明", } 表单元素： <input v-model="name"> 使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。
在vue中，提供了很多指令，常用的有：v-html、v-if、v-model、v-for等等。
v-text相当于js代码的innerText，相当于我们上面说的模板语法，直接在html中插值了，插的就是文本，如果data里面写了个标签，那么通过模板语法渲染的是文本内容，这个大家不陌生，这个v-text就是辅助我们使用模板语法的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--vue的模板语法--> <div>{{msg}}</div> <div v-text="msg"></div> <div v-html="msg"></div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el:'#app', data(){ // 记得data是一个函数,函数中的return是一个对象,可以是一个空对象,但必须return return{ msg: '<h2>we are 伐木累~</h2>' // 后端返回的是标签,那么我们可以直接通过v-html渲染出来标签效果 } } }) </script> </html>
指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。
vue1.x写法 vue2.x的写法
v-html ----> {{ }} v-bind:属性名 ----> :属性 v-on:事件名 ----> @事件名
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。
标签元素: <!-- vue对象最终会把条件的结果变成布尔值 --> <h1 v-if="ok">you seen me!</h1> <h1 v-if="no">你看不见我吧!</h1> data数据: data(){ return{ ok:true, no:false, } }
v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
标签元素： <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> data数据： data:{ ok:false // true则是显示，false是隐藏 }
在vue2.1.0版本之后，又添加了v-else-if，v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用。
可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。
标签元素： <h1 v-if="num===1">num的值为1</h1> <h1 v-else-if="num===2">num的值为2</h1> <h1 v-else>num的值是{{num}}</h1> data数据： data:{ num:2 }
标签元素： <h1 v-show="ok">Hello!</h1> data数据： data:{ ok:false // true则是显示，false是隐藏 }
简单总结v-if和v-show
v-show后面不能v-else或者v-else-if v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[DOM操作中的remove] v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
格式
<标签名 :标签属性='data属性'></标签名>
<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容，{{ }} 是简写 --> <a :href="url2">白底</a> <a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的写法 --> data数据: data(){ return{ str1:'百度', url:'http://www.baidu.com', }
有两种事件操作的写法，@事件名 和 v-on:事件名
<button v-on:click="num++">按钮</button> <!-- v-on 是vue1.x版本的写法 --> <button @click="num+=5">按钮2</button>
methods使用
<input :type="tt"> <button @click="show">{{msg}}</button>
methods:{
show(){ // 单体模式 , 就是我们定义的一个对象
if(this.tt==='password'){
this.tt = 'text';
this.msg = '隐藏密码';
}else{
this.tt = 'password';
this.msg = '显示密码';
}
}
}
例一:wife密码切换显示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input :type="tt"> <button @click="show">{{msg}}</button> </div> </body> <script src="vue.js"></script> <script> new Vue({ el:"#app", data(){ return{ msg:'显示密码', tt:'password', } }, methods:{ show(){ // 单体模式 if(this.tt==='password'){ this.tt = 'text'; this.msg = '隐藏密码'; }else{ this.tt = 'password'; this.msg = '显示密码'; } } } }) </script> </html>
总结:
1. 使用@事件名来进行事件的绑定 语法： <h1 @click="num++">{{num}}</h1> 2. 绑定的事件的事件名，全部都是js的事件名： @submit ---> onsubmit @focus ---> onfocus ....
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="box"> <button @click="++num">+</button> <input type="text" v-model="num"> <!--表单标签中使用v-model表示value--> <button @click="sub">-</button> <!-- 有人说--也可以，是的，但是单纯的使用--你会发现，数据会出现负数，负数是不合理的，所以要加判断，逻辑就复杂一些了，直接写在属性值里面不太好，那么想到的就是事件 --> </div> <script> let vm = new Vue({ el:"#box", data:{ num:0, }, methods:{ // sub:function(){},下面是这个写法的缩写 sub(){ if(this.num<=1){ this.num=0; }else{ this.num--; } } } }) </script> </body> </html> <!--#box>(button+input+button) tab键，快速生成html标签-->
操作样式
格式： <h1 :class="类值">元素</h1>
// 值可以是对象、对象名、数组（数组的方式用的比较少）,也可以是判断条件
class类值控制语法: :class='{类值:判断条件(布尔值或者得到布尔值的算式),类值:判断条件....}'
布尔值或者得到布尔值的算式: 里面直接可以使用数据属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .c1{ color: red; } .c2{ color: yellow; } </style> <body> <div id="app"> <p class="c1" :class="{c2:num<10}">{{1>2?'真值':'假值'}}</p> <!--后面的是js的三元运算--> <p :class="xx">{{num+2}}</p> <!--四则运算--> </div> </body> <script src="vue.js"></script> <script> new Vue({ el:'#app', data(){ return{ num:5, xx:'c1', } } }) </script> </html>
格式1：值是json对象，对象写在元素的:style属性中
标签元素：
标签元素:
<div :style="{color: activeColor ,fontSize: fontSize + 'px'}">重庆辣妹子</div> <!-- 注意：不能出现中横杠，有的话就套上'font-size'，或者去掉横杠，后一个单词的首字母大写，比如fontSize --> data数据如下： data: { activeColor: 'red', fontSize: 30 }
格式2：值是对象变量名，对象在data中进行声明
标签元素： <div v-bind:style="styleObject">东莞小姐姐</div> data数据如下： data: { styleObject:{ backgroundColor: 'tan', color:'red', } }
格式3：值是数组
标签元素： <div :style="[style1,style2]">尅ad大</div> data数据如下： data: { style1:{ color:"red" }, style2:{ background:"yellow", fontSize: "21px" } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #card{ width: 500px; height: 350px; } .title{ height:50px; } .title span{ width: 100px; height: 50px; background-color:#ccc; display: inline-block; line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */ text-align:center; } .content .list{ width: 500px; height: 300px; background-color: yellow; display: none; } .content .active{ display: block; } .title .current{ background-color: #a5136f; } </style> </head> <body> <div id="card"> <div class="title"> <span @click="num=1" :class="{current:num===1}">国内新闻</span> <span @click="num=2" :class="{current:num===2}">国际新闻</span> <span @click="num=3" :class="{current:num===3}">银河新闻</span> </div> <div class="content"> <div class="list" :class="{active:num===1}">国内新闻列表</div> <div class="list" :class="{active:num===2}">国际新闻列表</div> <div class="list" :class="{active:num===3}">银河新闻列表</div> </div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el:'#card', data:{ num:0, } }) </script> </html>
在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。
数据是数组： <ul> <!--i是列表的每一个元素--> <li v-for="book in book_list">{{book.title}}</li> </ul> <ul> <!-- v-for不仅可以遍历数组，还可以遍历对象，这里大家记住v-for里面的一个东西 :key, 就是v-bind:key，这个key是干什么的呢，就是为了给现在已经渲染好的li标签做个标记，以后即便是有数据更新了，也可以在这个li标签里面进行数据的更新，不需要再让Vue做重新生成li标签的dom操作，提高页面渲染的性能，因为我们知道频繁的添加删除dom操作对性能是有影响的，我现在将数据中的id绑定到这里，如果数据里面有id，一般都用id，如果没有id，就绑定v-for里面那个index(当然你看你给这个索引取的变量名是什么，我这里给索引取的名字是index)，这里面它用的是diff算法，回头再说这个算法 --> <!-- <li v-for="(item,index) in data.users" :key="item.id" @click> 还可以绑定事件 --> <li v-for="(item,index) in book_list" :key="item.id"> 第{{index+1}}本图书：{{book.title}}</li> <!-- v-for的优先级最高，先把v-for遍历完，然后给:key加数据，还有，如果没有bind这个key，有可能你的页面都后期用动态数据渲染的时候，会出现问题，所以以后大家记着，一定写上v-bind:key --> </ul> <script> var vm1 = new Vue({ el:"#app", data:{ book_list:[ {"id":1,"title":"图书名称1","price":200}, {"id":2,"title":"图书名称2","price":200}, {"id":3,"title":"图书名称3","price":200}, {"id":4,"title":"图书名称4","price":200}, ] } }) </script> 数据是对象： <ul> <!--i是每一个value值--> <li v-for="value in book">{{value}}</li> </ul> <ul> <!--value是每一个value值,attr是每一个键名--> <li v-for="value,attr in book">{{attr}}:{{value}}</li> </ul> <script> var vm1 = new Vue({ el:"#app", data:{ book: { // "attr属性名":"value属性值" "id":11, "title":"图书名称1", "price":200 }, }, }) </script>
练习：
goods:[
{"name":"python入门","price":150},
{"name":"python进阶","price":100},
{"name":"python高级","price":75},
{"name":"python研究","price":60},
{"name":"python放弃","price":110},
]
# 把上面的数据采用table表格输出到页面，价格大于60的那一条数据需要添加背景色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bb { color: red } </style> </head> <body> <div id="app"> <table border="1"> <thead> <tr> <th>书名</th> <th>价格</th> </tr> </thead> <tbody> <tr v-for="(book,index) in goods" :key="index" :class="{bb:book.price>=100}"> <td>{{book.name}}</td> <td>{{book.price}}</td> </tr> </tbody> </table> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data() { return { goods: [ {"name": "python入门", "price": 150}, {"name": "python进阶", "price": 100}, {"name": "python高级", "price": 75}, {"name": "python研究", "price": 60}, {"name": "python放弃", "price": 110}, ] } } }) </script> </html>
过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。
Vue.filter("RMB1", function(v){ //就是来格式化(处理)v这个数据的 if(v==0){ return '穷逼' } return v+"元" }) new Vue({ el:'#app', data(){ return{ money:0, } } }) 使用: <h1>{{money|RMB1}}</h1>
var vm = new Vue({ el:"#app", data:{}, filters:{ RMB2:function(value){ if(value==''){ return; }else{ return '¥ '+value; } } } });
示例：数据小数点保留3位，并在后面加上一个元字
filter.js
// 全局过滤器 // Vue.filter("过滤器名称","调用过滤器时执行的函数") Vue.filter("RMB",function(value){ return value+"元"; });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/filters.js"></script> </head> <body> <div id="app"> 价格：{{price.toFixed(3)}}<br> 价格：{{price|keepdot2(3)|RMB}}<br> 价格：{{price|keepdot2(3)|RMB}}<br> 价格：{{price|keepdot2(3)|RMB}}<br> 价格：{{price|keepdot2(3)}}<br> </div> <script> var vm1 = new Vue({ el:"#app", data:{ price: 20.3 }, methods:{}, // 普通过滤器[局部过滤器] filters:{ keepdot2(value,dot){ //这里有两个参数，第二个参数必须是调用过滤器时过滤器函数名称括号里面的值 return value.toFixed(dot) } } }) </script> </body> </html>
我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。其实计算属性主要用于监听，可以监听多个对象，后面学了监听之后再说。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{str1}}</p> <p>{{strRevs}}</p> </div> </body> <script src="vue.js"></script> <script> var vm = new Vue({ el:'#app', data:{ str1: 'abcdefgh', }, computed:{ // 计算属性,里面的函数都必须有返回值 strRevs:function (){ var ret = this.str1.split('').reverse().join(''); return ret } } }) </script> </html>
示例：过滤器和计算属性的简单对比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/filters.js"></script> </head> <body> <div id="app"> 原价格：{{price|k2}}<br> 折扣价：{{new_price}}<br> </div> <script> var vm1 = new Vue({ el:"#app", data:{ price: 20.3, sale: 0.6, }, // methods:{} // 过滤器 filters:{ k2(value){ return value.toFixed(2) } }, // 计算属性 computed:{ new_price(){ return (this.price*this.sale).toFixed(2); } } }) </script> </body> </html>
侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化后的数据值，第二个是变化前的数据值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{num}}</p> <button @click="num++">加一</button> <hr> <p>{{info.price}}元</p> <button @click="info.price++">加钱</button> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data() { return { num:122, info:{ price:21, } } }, watch:{ num:function(newval,oldval){ // num发生变化时,要执行的代码 console.log(newval,oldval) }, 'info.price'(newprice,oldprice){ // 监听嵌套数据的写法 console.log(newprice,oldprice) } } }) </script> </html>
示例：用户名长度限制4-10位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model="xx" placeholder="请输入用户名"> <span style="color: red;font-size: 12px">{{msg}}</span> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data() { return { xx:'', msg:'你有多长?', } }, watch:{ xx(newv,oldv){ if (newv.length > 4 && newv.length < 10){ this.msg = ''; }else{ this.msg = '长度不对!!!' } } } }) </script> </html>
每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.min.js"></script> <script> window.onload = function(){ //$(function(){})() $.ready() -- window.onload = function(){} var vm = new Vue({ el:"#app", data:{ num:0 }, beforeCreate:function(){ console.log("beforeCreate,vm对象尚未创建,num="+ this.num); //undefined，就是说data属性中的值还没有放到vm对象中 this.name=10; // 此时没有this对象呢，所以设置的name无效，被在创建对象的时候被覆盖为0 console.log(this.$el) //undefined }, created:function(){ // 用的居多，一般在这里使用ajax去后端获取数据，然后交给data属性 console.log("created,vm对象创建完成,设置好了要控制的元素范围,num="+this.num ); // 0 也就是说data属性中的值已经放到vm对象中 this.num = 20; console.log(this.$el) //undefined }, beforeMount:function(){ console.log( this.$el.innerHTML ); // <p>{{num}}</p> ,vm对象已经帮我们获取到了这个视图的id对象了 console.log("beforeMount,vm对象尚未把data数据显示到页面中,num="+this.num ); // 20,也就是说vm对象还没有将数据添加到我们的视图中的时候 this.num = 30; }, mounted:function(){ // 用的居多，一般在这里使用ajax去后端获取数据然后通过js代码对页面中原来的内容进行更改 console.log( this.$el.innerHTML ); // <p>30</p> console.log("mounted,vm对象已经把data数据显示到页面中,num="+this.num); // 30,也就是说vm对象已经将数据添加到我们的视图中的时候 }, // 后面两个简单作为了解吧，测试的时候最好单独测试下面两个方法 beforeUpdate:function(){ // this.$el 就是我们上面的el属性了，$el表示当前vue.js所控制的元素#app console.log( this.$el.innerHTML ); // <p>30</p> console.log("beforeUpdate,vm对象尚未把更新后的data数据显示到页面中,num="+this.num); // beforeUpdate----31 }, updated:function(){ console.log( this.$el.innerHTML ); // <p>31</p> console.log("updated,vm对象已经把过呢更新后的data数据显示到页面中,num=" + this.num ); // updated----31 }, }); } </script> </head> <body> <div id="app"> <p>{{num}}</p> <button @click="num++">按钮</button> </div> </body> </html>
总结：
在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。
另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created
使用.stop和.prevent
示例1：阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: tan; height: 200px; } .c2{ background-color: red; height: 100px; width: 100px; } </style> <script src="vue.js"></script> </head> <body> <div id="app"> <div class="c1" @click="f1"> <!-- 阻止事件冒泡 --> <!-- <div class="c2" @click.stop="f2"></div>--> <div class="c2" @click.stop.prevent="f2"></div> </div> <!-- 阻止标签默认动作 --> <!-- <a href="http://www.baidu.com" @click.stop.prevent="">百度</a>--> </div> </body> <script> var card = new Vue({ el:"#app", data:{ username:'chao' }, methods:{ f1(){ alert('负极标签'); }, f2(){ alert('子标签') } }, }); </script> </html>
示例2：阻止form表单提交动作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/filters.js"></script> </head> <body> <div id="app"> <form action=""> 账号：<input type="text" v-model="user"><br><br> 密码：<input type="password" v-model="pwd"><br><br> <button @click.prevent="loginhander">登录</button> </form> </div> <script> var vm1 = new Vue({ el:"#app", data:{ user:"", pwd:"", }, methods:{ loginhander(){ if(this.user.length<3 || this.pwd.length<3){ // 长度太短不能登录 alert("长度太短不能登录"); // 也可以写个return false; 也可以不写，prevent直接就是阻止form表单的提交动作 }else{ // 页面跳转 location.assign("http://www.baidu.com"); //或者： //location.href="http://www.baidu.com"; } } } }) </script> </body> </html>
我的计划列表:
html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist</title> <style type="text/css"> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> </head> <body> <div class="list_con"> <h2>To do list</h2> <input type="text" name="" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn"> <ul id="list" class="list"> <!-- javascript:; # 阻止a标签跳转 --> <li> <span>学习html</span> <a href="javascript:;" class="up"> ↑ </a> <a href="javascript:;" class="down"> ↓ </a> <a href="javascript:;" class="del">删除</a> </li> <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> </ul> </div> </body> </html>
效果实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist</title> <style type="text/css"> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> </head> <body> <div class="list_con"> <h2>To do list</h2> <input type="text" name="" id="txt1" class="inputtxt" v-model="message"> <input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="add"> <ul id="list" class="list"> <!-- javascript:; # 阻止a标签跳转 --> <li v-for="(value,index) in data_list" :key="index"> <span>{{value}}</span> <a href="javascript:;" class="up" @click="up(index)"> ↑ </a> <a href="javascript:;" class="down" @click="down(index)"> ↓ </a> <a href="javascript:;" class="del" @click="del(index)">删除</a> </li> </ul> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el:'.list_con', data(){ return{ message:'', data_list:['学习html','学习css','学习js'], } }, methods:{ // 增加记录 add(){ this.data_list.push(this.message); this.message=''; }, // 删除 del(index){ this.data_list.splice(index,1) }, up(index){ if(index > 0){ let up_ele = this.data_list.splice(index,1)[0]; this.data_list.splice(index-1,0,up_ele); } }, down(index){ if(index < this.data_list.length){ let up_ele = this.data_list.splice(index,1)[0]; this.data_list.splice(index+1,0,up_ele); } } } }) </script> </html>
splice方法的简单使用
删除
let xx = [11,22,33,44,55];
xx.splice(2,2); // 表示从索引为2的开始切割两个,得到的是切割的元素 [33,44]
删除替换
let xx = [11,22,33,44,55];
xx.splice(2,2,'aa','bb','cc','dd');
[11, 22, "aa", "bb", "cc", "dd", 55]
a标签href属性
<a href="#">百度</a> <!--href属性为空时，刷新页面--> <!--不写href属性，就是普通文本标签--> <!-- 当href属性等于某个值时，页面跳转到对应的页面 --> <!-- 当href属性等于javascript:void (0);简写javascript:;时，不刷新也不跳转 --> <!-- 当href属性等于#时，不刷新也不跳转，但是会在url上加个#号结尾 -->
本文来自博客园，作者：长情不羁的五年，转载请注明原文链接：https://www.cnblogs.com/fivenian/articles/14100541.html
