Vue实战笔记-零基础入门 ---更新中
Vue.js
简单认识Vue.js, 官方连接：Vue官网，首先需要说明的一点 ，js原生代码中的Var声明变量会提前声明的现象，所以在实际开发中不推荐使用，推荐使用的变量声明方式如下：
let：定义变量，比较推荐使用，不推荐使用varconst：用于定义常量
Vue.js的安装
-
方式一：直接CDN引入
//对于制作原型或学习，可以这样使用最新版本： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //对于生产环境 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> -
方式二：下载和引入
直接下载并用
# 最新稳定`在这里插在这里插入代码片入代码片`版
$ npm install vue
初次体验
<body>
<div class="app">{{name}}</div>
</body>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'.app',//选择器
data:{
name:'VueJs'
}
})
</script>
Vue中的MVVM
view层：视图层，也叫Dom层，用来向用户展示各种信息Model层：数据层，VueModel层：视图模型层，是View和Model之间数据交互的通道，一方面实现了数据绑定(Data binding)，实现了View层数据的实时渲染；一方面实现了Dom监听(Dom Listener)，监听Dom发生的事件，如点击，滚动等事件，并根据事件调用不同的方法。
Vue的生命周期
基本语法
在创建Vue实例的时候，Vue会向实例传入options对象，该对象包含的属性有：
- el :String类型，指向Dom元素标签中需要管理的对象，语法和css选择器一致。
- data:对象类型，Vue实例对应的数据对象，在页面中可以是一个对象，但是在组件中，必须是一个函数
- methods:定义Vue的一些方法，可以在其他地方调用，也可以在指令中使用
const app = new Vue({
el:'#app',
data:{
name:'lee'
},
methods:{
add:function(){
//....
},
sub: function(){
//....
}
}
})
常见的标签
v-for遍历
//迭代数组
{{i}}--->{{item.price}}
//迭代对象
--键是--{{key}}--值是--{{val}}
v-bind
-
v-bind:绑定class属性对象,bind:class="{isActive:true,isLine:true}" -
v-bind,绑定 style属性 ,bind:style="{fontSize:‘50px’}",注意value值需要加上单引号。若没有加上单引号，Vue就会当成一个变量来解析。 -
绑定基本属性：v-bind:src=’ xxxSrc ’ , v-bind:herf=’ xxxUrl ’ .
-
v-pre，不解析文本中的标签，直接以文本的方式展示到页面上 -
v-html，解析文本中的标签 -
v-text, 插入文本 -
v-cloak:斗篷，[v-cloak]:{display:none} -
v-on:click:事件监听
计算属性
computed:在new Vue() 的对象中，添加了这个属性，用于计算不同属性的值
let app = new Vue({
el: '.app', //选择器
data: {
name: 'VueJs',
fontSize: '100px'
},
computed: {
totalPrice:function(){
let price=0;
for(let i=0;i<this.books.length;i++){
price +=this.books[i].price;
}
return price;
}
},
methods:{
}
})
new Vue({option})，创建的对象中传入的是option对象.
计算属性的setter和getter
计算属性中的方法，原本的写法是这样的
fullName:function(){
return this.firstName +" "+this.lastName
}
//原型写法
fullName:{
set:function(){
//setter方法，一般情况下，不会使用setter方法
}
get: function(){
//getter方法
}
}
但是由于计算属性一般没有set方法，它是只读属性。所以可以简写成上面的computed的对象上写的那样。
如果使用set方法设置属性，则设置的语句为app.fullName=‘abc’ ，computed计算属性有缓存。相比较methods来说，性能比较好。若页面中有多个地方使用该属性，只会调用一次方法的执行。
- const 常量的含义是指向的对象不能修改，但是可以修改对象内部的属性。
对象的增强写法
属性的增强写法：
let name='lee';
let age=18;
const obj ={name,age}
方法的增强写法
//ES6的写法
const obj={
run(){
//方法的增强写法
}
}
//ES5的写法
const obj ={
run :function(){
//方法的定义
}
}
事件监听
v-on用于绑定事件监听器，缩写是@,基本使用的方法， 如：v-on:click- 语法糖，也可以写成：
@click
参数传递问题，在事件定义后，调用方法省略了小括号，但是方法本身需要传递 一个参数，此时Vue会默认将浏览器产生的event对象传入该方法中的第一个参数
<button @click='btnClick'> 按钮 </button>
在调用方法时候，手动的获取到浏览器参数的event对象，需要这样写$event
//监听点击事件
<button @click='btnClick('abc',$event)'> 按钮 </button>
//阻止事件冒泡
<button @click.stop='btnClick('abc',$event)'> 按钮 </button>
//阻止浏览器默认行文
<button @click.prevent='btnClick('abc',$event)'> 按钮 </button>
//监听键盘的Enter事件
<input @keyup.enter='keyUp'> 按钮 </button>
//只监听一次事件
<button @click.once='btnClick('abc',$event)'> 按钮 </button>
条件判断
v-if的使用
<div id="app">
<div v-if='isShow'> 显示</div>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
isShow:false
}
})
</script>
v-if ，v-else-if, v-else的结合使用
<div v-if='isShow'> 显示if</div>
<div v-else-if='isShow'> 显示else if</div>
<div v-else>else的内容</div>
v-show 和 v-if的区别
v-show 会在Dom中创建元素，只是当它的值为false的时候，它增加一个行内样式display：none,而当 v-if 的值为false时候，它并 不会在Dom中创建元素,所以当元素的显示和隐藏使用的频率很高的时候，建议使用v-show,当只有一次切换的时候，建议使用v-if
v-for 遍历数组和对象
- 遍历数组
//没有显示下标值
<li v-for='item in names'>{{item}}</li>
//遍历过程中，使用下标
<li v-for='(item,index) in names'>{{index}}===>{{item}}</li>
//script
const app = new Vue({
el: '#app',
data: {
names:['a','b','c','d']
},
methods: {
shift(){
this.isShow= !this.isShow;
}
}
})
- 遍历对象
//仅仅获取属性值
<li v-for='value in user'>{{value}}</li>
//获取属性值和属性名
<li v-for='(value,key) in user'>{{key}}===>{{value}}</li>
//获取属性值，属性名和index,使用较少
<li v-for='(value,key,index) in user'>{{index}}===>{{key}}===>{{value}}</li>
- Vue.js中遍历的数组对象
let total =0;
for(let item of this.books){
total +=item.count*item.price;
}
官方推荐在遍历对象和数组的时候，加上key属性
//尽量保证绑定key的唯一性
<li v-for='item in names' :key='item'>{{item}}</li>
数组方法中的响应式方法
数组中的方法，并不是所有的都是响应式的，有的方法即使修改了数组的内容，也不会立即在页面上展示出来。
响应式的方法
- push() ，在数组最后一个元素后添加元素
- pop()，删除数组最后一个元素
- shift()，删除第一个元素
- unshift()，在数组最前面添加元素
- sort()，排序
- reverse()
- splice(start,del-num,replace-elem),指定位置start上删除del-num个元素,并替换指定元素
非响应式的方法 - this.array[0] =‘aaa’; Vue的内部不会监听这个方法对数组的改变，不要使用这种方法改变数组.
Vue的filter的使用
双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
//过滤器的定义
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
面向函数编程
编程范式中，面向对象编程的（第一公民：对象），函数式编程（第一公民：函数）
- filter()，过滤器
filter的回调函数必须返回boolean类型的值，如果返回的是true, filter会自动将该次的遍历的对象放入到数组中，若返回false，则直接过滤掉该对象
let newNums= nums.filter(function(n){
//return false ; 过滤掉该对象
//return true ; 不会过滤掉该对象
})
//过滤小于100的数字
nums.filterr(function(n){
return n<100;
})
- map(),数组计算,对数组中的方法进行遍历，然后对数组中的每一个对象做相同的处理
//对数组中的每一个数字*2
nums.map(function(n){
return n*2;
})
- reduce(参数一，参数二) 对数组中的所有内容进行汇总统计
参数一本身是一个函数，参数二是默认值
//preValue:初始化默认值
nums.reduce(function(preValue,n){
},0)//初始话默认值是0,preValue =0;
表单绑定 v-model
实现数据的双向绑定，若改变data中定义的数据，Dom标签中绑定的数据也会改变；若改变Dom标签中的数据，则data中定义的数据也会改变,可用于textarea的功能
<body>
<div id="app">
<input type="text" v-model='message'/>
//等同于
<input type="text" v-bind:value='message' v-on:input='message=$event.target.value'>
//`v-on:input='inputChange'` 用户监听用户的输入事件，当用户在输入栏输入数据时候，就会调用`inputChange`方法
</div>
</body>
<script src="../vue.js"></script>
<script>
const app =new Vue({
el:'#app',
data:{
message:'Hello'
}
})
</script>
- v-model结合select标签使用,其中mutilple是可以多选的属性
选择的是:{{fruits}}
- input的值得绑定
绑定value的值，让用户的选择是可选的
<div id="app">
<label v-for='item in originFruits' :for='item'>
<input type="checkbox" :value='item' v-model='hobbies'>
{{item}}
</label>
<div>选择的是:{{hobbies}}</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello',
hobbies: [],
originFruits: ['篮球', '足球', '乒乓球', '羽毛球', '台球']
}
})
</script>
v-model 修饰符的使用
v-model.lazy, 实现节流，v-model实现的双向绑定，在用户每输入一个字符都会实时更新绑定的对象的内容，这样的效果并不高效的，现有的需求是，当用户输入完成后，按下Enter键才会进行更新，此时加上lazy修饰符就可以解决v-model.number, 实现绑定的的数字类型不会转换成String。v-model.trim,去除用户输入的空格