3月1日学习内容整理：Vue框架的基本使用
1、vue的设计模式：MVVM
Model--View--ViewModel
2、js的es6版本常用语法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> // 声明常量 不变的数 不能被修改的变量 const a = 12; a = 13; console.log(a); let b = 11 //let也是声明变量用的 var a = 12 // es6 //1.模板字符串 1左边的字符 拼接变量使用${变量名} // 数据属性比较多，数据量比较大 var name = '小明',age = '83'; var str = name+"今年"+age+"，下午我们去吃鸡"; //这里是用波浪号的那个键打的引号，使用${变量名}来做字符和变量的拼接 var str = `"${name}"今年${age}，下午我们去吃鸡` console.log(str) var url = 'https://www.baidu.com' $('ul>li').append( `<a href=${url}>百度一下</a> <img src="" alt='一张图片'>` ) // 2.箭头函数 // es5 写法 function add(x,y) { return x+y } add(1,2) // 伪代码 var 函数名 = (这里写参数)=>{函数体} var add2 = (a,b)=>{ return a+b } alert(add2(2,3)) // 字面量方式创建对象 var person = { name:'小明', age:18, fav:function() { alert("抽烟喝酒烫头") //es5的函数中的this指向了当前对象 alert(this.name) } } person.fav() var person2 = { name:'小明2', age:18, fav:()=>{ alert("抽烟喝酒烫头") // es6注意事项：箭头函数会改变this的指向 父级 console.log(this) } } person2.fav() //3.对象的单体模式 // 使用对象的单体模式解决了this的指向问题 var person2 = { name:'小明2', age:18, fav(){ console.log(this)//这里的this就指向的当前对象，就是person2 } } person2.fav() </script> </body> </html>
3、js的es6版本的面向对象
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> // 面向对象 // 封装，继承，多态 // 继承：子类会继承父类的属性和方法，子类拥有自己的属性和方法 // es5的构造函数 创建对象 // 狗：属性，方法 function Dog(name,age){ this.name = name; this.age = age; // 点语法 set方法和get方法 } // js中有原型prototype，构造函数继承了它 // 所以构造函数中的方法要这样写 Dog.prototype.showName = function() { alert(this.name) } Dog.prototype.showAge = function() { alert(this.name) } var d = new Dog('小黄',10) d.showName() // es6使用class 类方式创建 class Cat{ // constuctor 构造器 class方式创建 单体模式之间不要有逗号 // 在这个构造器中写对象的属性 constructor(name,age){ this.name = name; this.age = age } // 这里是对象方法 showName(){ console.log(this.name) } showAge(){ } } var c = new Cat('xiaohong',12) c.showName() </script> </body> </html>
4、vue使用
（1）实例对象
// 使用双大括号来插入值，这里的msg就是对象的属性，可以直接写 <h3>{{msg}}</h3> <script type="text/javascript"> //实例出vue对象 var app = new Vue({ // 参数对象中有几个重要的属性 el:"#app", //这就找到了对应的标签 // data中就放置对象的属性 data:{ msg:'今天 我们学习vue', } })
（2）指令系统
》》》判断 v-if：要格外注意一点，我们定义的对象属性只能在el这个参数找到的标签中使用，别的标签中是识别不了的
// 在标签中这样用，isShow是对象的属性，就是写在data参数里的 // 为true时该标签在页面中显示，为false时该标签会被清除掉 <div class="div1" v-if="isShow">1</div> //实例出vue对象 var app = new Vue({ // 参数对象中有几个重要的属性 el:"#app", //这就找到了对应的标签 // data中就放置对象的属性 data:{ isShow:true,
》》》判断 v-show
v-show指令和v-if用法一样，都是true时显示，false时不显示，唯一的区别是v-if为false时页面中不会存在这个标签，v-show为false时则会保留这个标签，只不过是display属性为none被隐藏了
》》》事件绑定 v-on
// v-on：事件名 = '方法名'，注意这里的v-on:可以用@代替 <button v-on:click = 'showHandler'>按钮</button> // 在vue对象中定义方法，利用methods参数， methods:{ showHandler (这里写参数) { this.isShow = !this.isShow },
》》》循环 v-for
// v-for就是循环，item就是循环的每一个元素，index是索引 // in imgArr就是vue对象的属性，也就是在data中定义的 <li v-for='(item,index) in imgArr' @click='currentHandler(item)'>{{index}}</li> data:{ imgArr:[ './images/0.png', './images/1.png', './images/2.png', './images/3.png', ]
》》》属性绑定 v-bind
// v-bind：和哪个属性绑定，这里是class值='{ class值：对象属性 }' // 当isYellow为true时，div3这个class值就会被添加进去，为false时就会被删除掉 // 我们可以用v-bind这条指令来改变标签的样式 <div class="div2" v-bind:class='{div3:isYellow}'></div>
（3）计算属性和监听器
计算属性是用来表达很复杂的逻辑处理表达式，这样不会让模版变得国务繁重难以维护
利用对象的computed参数，这里我们定义的函数就是属性的getter函数，也就是只用来提取属性值
这里的reversedMessage就是计算属性，在标签中用双大括号来引用，计算属性默认只有getter方法，也就是只用来取值
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })
某些情况下我们需要修改属性值，就要用到计算属性的setter
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// 当对象的计算属性fullname被修改时，就会调用setter方法，从而改变对象的
// firstname 和 lastname这两个属性值
（4）表单的输入绑定
》》》利用v-model指令就实现了form表单的双向数据绑定
// v-model对应对象的某个属性，当表单标签的value值改变时就会自动把value数据 // 填充到v-model对象的属性值中 <div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> new Vue({ el: '#example-4', data: { picked: '' } })
》》》v-model的修饰符
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
》》》如何阻止form表单的默认事件发生
直接在form标签中添加@submit.prevent 这样点击submit按钮就不会提交数据了
还有一种方法是给submit按钮绑定点击事件，在vue对象中这样去写：这个e参数在标签中@click='submitHandler()'不用写
methods:{
submitHandler(e){
// 阻止form表单的默认事件
e.preventDefault()
}
},
这样也能实现点击submit按钮时form就不会提交数据了
