Vue草稿
Vue学习笔记
1.概述、特征、以及初始化
- Vue 是一种灵活的渐进式相应框架
- 采用声明式的编程范式
引用Vue的方法
<script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', //用于挂载需要挂载的元素 data: { message: 'fuck you' } }) </script>
通过采用el挂载和HTML代码定义id的方式来使用Vue.
data是vue实例对应的数据对象
methods定义属于vue的一些方法,可以再其他地方调用,也可以在指令中使用
2. 创建、显示、更新列表
<div id="app"> <ul> <li v-for="item in movies">{{item}}</li> </ul></div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'ssda', movies: ['星际穿越', '大话西游', '少年派'], } }) </script>
声明式的编程范式,使得列表操作变得简易。
3.案例:计数器
包含新的指令,v-on 和新的属性 methods,可以通过函数的形式来匹配复杂的操作
<button v-on:click="add">+</button> <button v-on:click="sub">-</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { add: function () { console.log('+++') this.counter++ }, sub: function () { console.log('---') this.counter-- } }, }) </script>
此处 v-on:click 可以用语法糖 @click 来替代。
4.关于插值的操作
mustache 语法
<h2>{{message}}, 李银河!</h2> <h2>{{firstName + lastName}}</h2>
mustache语法中不仅可以写变量,亦可以写简单的表达式。
v-once 指令
表示页面的元素和组件只渲染一次,不会随着数据的改变而改变。
<h2 v-once>{{message}}</h2>
v-for 指令
表示循环元素或组件中的内容,后接表达式。
<ul> <li v-for="item in movies">{{item}}</li> </ul>
v-html 指令
表示有选择性地解析html中的内容
<h2 v-html='url'>{{url}}</h2>
v-text 指令
<h2 v-text='message'>,栗子</h2>
表示显示指定的数据,但是很不灵活,会直接覆盖原标签内的数据,而且不支持拼接等操作。
该指令用得不多
v-pre 指令
<h2 v-pre>{{message}}</h2>
表示原封不动地显示标签内的内容,而不会对其进行解析。
该指令用得不多
v-cloak 指令
一般用来消除抖动
<style> [v-cloak] { display: none } </style> <div id="app"> <h2 v-cloak>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> // 由于 v-cloak 在被解析之后会被删除,所以 // 在vue解析之前,div中有v-cloak属性 // 在vue解析之后,div中没有v-cloak setTimeout(function () { const app = new Vue({ el: '#app', data: { message: '你好' } }) }, 1000) </script>
5.v-bind 数据绑定
v-bind 的基本使用
绑定属性
<img v-bind:src='imgURL' alt="谷歌"> <a v-bind:href="ahref">百度一下</a>
v-bind 语法糖
<a :href="ahref">百度一下</a>
实际上是省略了v-bind指令。
v-bind 绑定到class有两种方式 对象语法和数组语法
用法一 可以直接通过{}绑定一个类
用法二 可以通过判断传入多个值
用法三 和普通的类同时存在,并不冲突
v-bind 绑定到class(对象语法)
此案例添加了一个按钮,并设置了一个监听事件,使得点击按钮时改变绑定到
<h2>的class中的布尔值,从而实现对样式的改变。
<div id='app'> <h2 v-bind:class='{active: isActive, line: isLine}'>{{message}}</h2> <button v-on:click='btnClick'>按钮</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好', isActive: true, isLine: false, }, methods: { btnClick: function () { this.isActive = !this.isActive } } })
v-bind 绑定到class(数组语法)
<div id='app'> <h2 class="title" :class="[active, line]">{{message}}</h2> <h2 class="title" :class="getClasses()">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', active: 'one', line: 'two' }, methods: { getClasses: function () { return [this.active, this.line] } } }) </script>
v-bind 动态绑定style(对象语法)
原理大致相同,引号后面改成style即可。
<div id='app'> <!-- <h2 v-bind:style='{属性名:属性值}'>{{message}}</h2> --> <!-- <h2 v-bind:style='{fontSize: theSize + "px", color: theColor}'>{{message}}</h2> --> <h2 v-bind:style='getStyles()'>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', theSize: 100, theColor: 'red', }, methods: { getStyles: function () { return { fontSize: this.theSize + "px", color: this.theColor } }, } }) </script>
v-bind 动态绑定style(数组语法)
<div id="app"> <h2 :style='[baseStyle, baseStyle1]'>{{message}}</h2> </div> <script src='../js/vue.js'></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', baseStyle: { backgroundColor: 'red' }, baseStyle1: { fontSize: '88px' } } }) </script>
6.计算属性
特点:html代码里面非常清晰
<h2>{{fullMessage}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'asd', message2: 'dd', }, computed: { fullMessage() { return this.message + ' ' + this.message2 } }, methods: { getFullMessage() { return this.message + ' ' + this.message2 } } }) </script>
复杂操作
<script> const app = new Vue({ el: '#app', data: { books: [ { id: 110, name: 'Unix程艺术', price: 119 }, { id: 111, name: 'Unx编程艺术', price: 1192 }, { id: 112, name: 'Uix编程艺术', price: 1191 }, { id: 113, name: 'Uni编程艺术', price: 11945 }, ] }, methods: {}, computed: { totalPrice: function () { let result = 0 // for (let i = 0; i < this.books.length; i++) { // result += this.books[i].price // } for (let book of this.books) { result += book.price } return result } } }); </script>
7.es6语法补充
<script> // 属性的增强写法 const name = 'chen' const age = 18 const obj = { name: name, age: age } //以上是es5的写法 // es60的写法如下 const obj = { name, age } // 函数的增强写法 //es5中的 const obj = { run: function () { }, eat: function () { }, } //es6中的 const obj = { run() { }, eat() { }, } </script>
var没有块级作用域,所以用let
const指定对象之后不可更改,但是const内部可以进行更改
可变参数
function sum(...num) { console.log(num) } sum(1,2,3,4,5)
for of 的使用
var arr = ['nick','freddy','mike','james']; for(var item of arr){ console.log(item); }
数组对象都支持,非常的简洁!
高阶函数 filter/map/reduce
1.filter函数的使用
filter中的回调函数有一个要求:必须返回一个boolean值
true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中
false:当返回false时,函数内部会过滤掉这次的n
const nums = [10, 230, 22, 55, 11] let newNums = nums.filter(function(n) { return n < 100 })
2.map函数的使用
let new2Nums = newNums.map(function(n) { return n * 2 })
3.reduce函数的使用
作用:对数组中的所有内容进行汇总。
new2Nums.reduce(function(preValue, n) { return preValue + n }, 0)
高阶函数链式编程
const nums = [1,2,3,55,66,22,66,33] let total = nums.filter(function(n) { return n < 100 }).map(function (n) { return n * 2 }).reduce(function (prevValue, n) { return prevValue + n }, 0) // 箭头函数 let total2 = num.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n)
8.事件监听
v-on的基本使用
<div id='app'> <h2>{{message}}</h2> <h2>{{counter}}</h2> <!-- <button v-on:click="increment">+</button> <button v-on:click="decrement">-</button> --> <button @click="increment">+</button> <button @click="decrement">-</button> </div> <script src='../js/vue.js'></script> <script> const app = new Vue({ el: '#app', data: { message: 'Hello, world!', counter: 0 }, methods: { increment() { return this.counter++ }, decrement() { return this.counter-- }, }, computed: { }, }) </script>
v-on的参数问题
<div id='app'> <!-- 事件调用的方法没有参数 --> <button @click="btnClick()">按钮1</button> <!-- 在事件定义时,写方法时省略了小括号,但是方法本身是需要一个参数的, 这个时候,vue会默认将浏览器生成的event对象作为参数传入到方法。 --> <button @click="btn2Click">按钮2</button> <!-- 方法定义时,我们需要event对象,同时又需要其他参数 --> <!-- 在调用方法时,如何手动获取到浏览器参数的event对象:$event --> <button @click="btn3Click(123, $event)">按钮3</button> <button>按钮4</button> </div> <script src='../js/vue.js'></script> <script> const app = new Vue({ el: '#app', data: { event: 'chen' }, methods: { btnClick() { console.log('hello world!') }, btn2Click(item) { console.log('====', item) }, btn3Click(item, event) { console.log('+++++', item, event); } } }) </script>
v-on修饰符
<div @click='divClick'> 点这里 <button @click.stop="btnClick">按钮1</button> </div> <br> <div> <!-- 2.prevent 修饰符使用,阻止默认事件 --> <form action='baidu'> <input type='submit' value="提交" @click.prevent='submitClick'> </form> <!-- 3.监听某个键盘案件的点击,加.enter 则监听回车 --> <input type='text' @keyup='keyUp'> <!-- 4.once修饰符的使用 只触发一次回调--> <button @click.once="btn2Click">按钮2</button> </div>
9.条件判断
v-if 和 v-else的使用
<div id='app'> <h2 v-if='score>=90'>优秀</h2> <h1 v-else-if='score>=80'>良好</h1> <h1 v-else-if='score>=60'>及格</h1> <h1 v-else>不及格</h1> </div>
指令判断,不建议写到标签里,建议写计算属性
登陆切换的一个小案例
<div id='app'> <span v-if='isUser'> <label for="username">用户账户</label> <input type="text" id="username" placeholder="用户账户"> </span> <span v-else=''> <label for="useremail">用户邮箱</label> <input type="text" id="useremail" placeholder="用户邮箱"> </span> <button @click='isUser=!isUser'>切换类型</button> </div>
如果不希望输入框内容复用。可以加入一个key属性
<span v-if='isUser'> <label for="username">用户账户</label> <input type="text" id="username" placeholder="用户账户" key='username'> </span> <span v-else=''> <label for="useremail">用户邮箱</label> <input type="text" id="useremail" placeholder="用户邮箱" key='useremail'> </span>
v-show的使用
<div id='app'> <h2 v-if='isShow' id='aaa'>{{message}}</h2> <h2 v-show='isShow' id='bbb'>{{message}}</h2> </div>
v-if中,条件为false时,包含v-if指令的元素,根本不会出现在dom中。
v-show中,当条件为false时,v-show只是给元素增加了一个行内样式 display:none。
如何选择:频繁切换时用show,否则用if。
10.循环遍历
遍历数组
<div id='app'> <!-- 1.在遍历的过程中,没有使用索引值 --> <h2>{{message}}</h2> <ul> <li v-for='item in names'>{{item}}</li> </ul> <!-- 2.在遍历的过程中,获取索引值。 --> <ul> <li v-for='(item, index) in names'>{{index+1}}.{{item}}</li> </ul> </div>
遍历对象
<div id='app'> <!-- 1.在遍历对象的过程中,如果只是获取一个值,那么获取到的是value --> <ul> <li v-for='item in info'>{{item}}</li> </ul> <!-- 2.获取key和value 格式(value, key)--> <ul> <li v-for='(value, key) in info'>{{key}}-{{value}}</li> </ul> <!-- 3.获取key和value和index 格式(value, key index) --> <ul> <li v-for='(value, key, index) in info'>{{key}}-{{value}}-{{index}}</li> </ul> </div>
v-for使用过程绑定key
<ul> <li v-for='item in letters' v-bind:key='item'>{{item}}</li> </ul>
添加唯一标志key进行绑定后,中间插入效率高。
哪些数组的方法是响应式的
push(), pop(), shift(), unshift(), splice(), sort(), reverse()
methods: { btnClick() { // 1.push方法。改变的时候是响应式的 this.letters.push(this.mark) this.mark += 1 // 2.pop(),响应式,删除数组中最后一个元素。 this.letters.pop(); // 3.shift(),响应式,删除数组中的第一个元素。 this.letters.shift(); // 4.unshift(), 响应式,在数组开头添加元素 this.letters.unshift('thing', 'asd', 'ddd') 5.splice() // 可以删除、插入、替换元素 // 删除元素: 第二个参数传入你要删除几个元素(如果不传,则删除后面所有的元素) // 替换元素: 第二个参数表示我们要替换几个元素,后面接用于替换的元素 // 插入元素:第二个参数,传入0,后面跟上要插入的元素。 // splice(start, ), 响应式 this.letters.splice() // 6.sort() 响应式,排序 this.letters.sort() // 7.reverse() 响应式,反转 this.letters.reverse() // 0.通过索引值修改数组中的元素,不是响应式 this.letters[0] = 'haa'},
通过索引值修改数组中的元素,不是响应式
this.letters[0] = 'haa'
this.letters[0] = ‘haa’
Vue中定义的响应式修改方式:
Vue.set(this.letters, 0, 'bbbbbb')
一个点击变色小作业的实现
<ul> <li v-for='(item, index) in movies' v-bind:key='item' v-bind:class='{active: currentIndexL === index}' @click='liClick(index)'>{{item}} </li> </ul> </div> <script src='../js/vue.js'></script> <script> const app = new Vue({ el: '#app', data: { message: 'Hello world!', movies: ['海王', '肖申克的救赎', '海上钢琴师', '复仇者联盟'], currentIndex: 0, }, methods: { liClick(index) { this.currentIndex = index } } }) </script>
解决此作业的精髓在于:在列表处循环时讲index 分离出来,并在点击事件中调用liClick(index)方法时把index传回去,并在data里面定义一个currentIndex来记录状态,作为动态绑定样式的依据,非常精妙!妙啊!
11.书籍购物车案例
过滤器的实现
<td>{{item.price | getFinalPrice}}</td>
filters: { getFinalPrice (price) { return '$' + price.toFixed(2) }
计算总价格的四种循环实现方法
computed: { totalPrice () { let totalPrice = 0 // 1.普通的for循环 // for (let i = 0; i < this.books.length; i++) { // totalPrice += this.books[i].price * this.books[i].count // } // return totalPrice // 2.for (let i in this.books) // for (let i in this.books) { // totalPrice += this.books[i].price * this.books[i].count // } // return totalPrice // 3. for的 // for (let item of this.books) { // totalPrice += item.price * item.count // } //return totalPrice //} //}, // 4.reduce实现 return this.books.reduce((pre, book) => pre + book.price * book.count) } },
v-if/else的实现
<div id='app'> <div v-if='books.length'> <table> <thead> <tr> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for='(item, index) in books'> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <!-- <td>{{getFinalPrice(item.price)}}</td> --> <td>{{item.price | getFinalPrice}}</td><td> <button @click='decrement(index)' v-bind:disabled='item.count <= 1'>-</button> {{item.count}} <button @click='increment(index)'>+</button> </td> <td> <button @click='removeHandle(index)'>移除</button> </td> </tr> </tbody> </table> <h2>总价格 {{totalPrice | getFinalPrice}}</h2> </div> <h2 v-else>购物车为空</h2> </div>
12.v-model使用
v-model基本使用
<div id='app'> <input type="text" v-model='message'> <h2>{{message}}</h2> </div>
v-model原理
v-model其实是一个语法糖,它的背后本质上时包含两个操作:
1.v-bind绑定一个value属性.
2.v-on指令给当前元素绑定input事件.
<input type="text" v-bind:value='message' v-on:input='message = $event.target.value'>
v-model结合radio类型
<div id='app'> <h2>您选择的性别是:{{sex}}</h2> <label for='male'> <input type="radio" id='male' name='gender' value="男zxc" v-model='sex'>男 </label> <label for='female'> <input type="radio" id='female' name='gender' value="女" v-model='sex'>女 </label> </div>
v-model结合checkbox单选、多选框使用
单选框对应布尔值,多选框则对应数组类型。
<div id='app'> <!-- checkbox单选框 --> <!-- <label for="license"> <input type="checkbox" id='license' v-model='isAgree'>同意协议 </label> --> <!-- <h2>您选择的是{{isAgree}}</h2> <button v-bind:disabled='!isAgree'>下一步</button> --> <!-- checkbox复选框 --> <label for="hobby1"> <input type="checkbox" value="唱" id='hobby1' v-model='hobbies'>唱 </label> <label for="hobby2"> <input type="checkbox" value="跳" id='hobby2' v-model='hobbies'>跳 </label> <label for="hobby3"> <input type="checkbox" value="Rap" id='hobby3' v-model='hobbies'>Rap </label> <label for="hobby4"> <input type="checkbox" value="篮球" id='hobby4' v-model='hobbies'>篮球 </label> <h2>您的爱好是: {{hobbies}}</h2> </div>
v-model结合checkbox进行值绑定
值不要写死,去动态获取
<label v-for='item in originHobbies' v-bind:for='item'> <input type="checkbox" v-bind:value="item" v-bind:id='item' v-model='hobbies'>{{item}} </label> <h2>您的爱好是: {{hobbies}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'Hello world!', isAgree: false, hobbies: [], originHobbies: ['唱', '跳', 'rap', '篮球'] } }) </script>
v-model结合select
<div id='app'> <select name='name' v-model='fruit'> <option value="唱">唱</option> <option value="跳">跳</option> <option value="rap">rap</option> <option value="篮球">篮球</option> </select> <h2>{{message}} {{fruit}}</h2> </div>
select多选现在用的不多,不做介绍。
v-model修饰符的使用
<div id='app'> <!-- 修饰符lazy,添加后不实时更新,失去焦点时再更新 --> <input type="text" v-model.lazy='message'> <h2>{{message}}</h2> <!-- 修饰符number,强制将绑定值更新为number类型 --> <input type="text" v-model.number='age'> <h2>{{age}}-{{typeof age}}</h2> <!-- 修饰符trim,剥除空格 --> <input type="text" v-model.trim='name'> <h2>您输入的名字:{{name}}</h2> </div>讨嫌喵 原创文章 7获赞 4访问量 198 关注 私信
- VUE路由根据返回状态判断添加响应拦截器(草稿)
- vue-cli 整个流程简单学习
- 怎么看vue版本
- Vue.js笔记,从入门到精通
- vue使用element-ui的el-input监听不了回车事件解决
- Vue lazyload懒加载使用
- Vue-router 中hash模式和history模式的区别
- Vue组件生命周期(面试常问,最讨厌的部分了吧,一直记不下来的来看看)
- Vue第二天(品牌列表案例 过滤器 按键修饰符 自定义全局(私有)指令 Vue实例的生命周期 vue-resource(axios))
- 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件
- vue-cli项目中使用axios/vant
- Vue组件传值
- Vue 2.0 时间过滤器
- 在vue中实现点击选择框阻止弹出层消失
- vue.js 初体验之Chrome 插件开发实录
- vue创建应用
- vue项目搭建配置sass、element-ui、vux、axios、服务器代理
- 路飞项目一:vue安装及介绍
- 都 9012了,该选择 Angular、React,还是Vue?
- django2 rest_framework + vue.js + mysql5.6 实现增删改查