Vue框架基础知识(一)

Vue的借鉴

• 借助了angular模板和数据绑定
• 借助了react的组件化和虚拟DOM的技术

Vue的插件

• vue-cli
• vue-resource
• vue-router
• vue-lazyload
• vue-scroller
• mint-ui
• element-ui

MVVC的理解

模板语法:

• 插值表达式的里面是变量,可以用原生js写<p>{{username.toUpperCase()}}</p>
• <img src="url">是html的语法,应该这样写 <img v-bind:src="url">可以省略为简洁写法<img :src="url">(强制绑定属性)
• 绑定事件监听,<button v-on:click="test(可选)"> <button>简洁写法,<button @click="test(可选)"> <button>

计算属性和监视

1. computed：计算属性中的一个方法，方法的返回值作为属性值

• 初始化显示执行
• 相关的data属性发生了变化

计算属性高级----**计算属性存在缓存,多次读取只执行一次getter计算

• get()方法(当需要读取当前值回调,根据相关的数据计算并返回当前属性的值)
• set()方法(监视当前属性值的变化,当属性值改变是发生回调,更新相关的属性数据)

 	computed: {
            all: {
                get() {
                    return this.first + " " + this.last
                },
                set(value) {
                    this.first = value.split(" ")[0]
                    this.last = value.split(" ")[1]
                }
            }
        },

2. watch—(更大用处:深度监视)–用回调处理(1. 什么时候调用?2. 用来做什么?)

• 监视属性，指明回调函数function(newVal,oldVal){}函数调用说明属性值发生了变化

class和style的绑定

class基本语法:class="xxx"

• xxx是字符字符串
  <p :class="a">小凡</p>a写到data中去
• xxx是对象—用的比较多的
  <p :class={aClass:isTrue}>小凡</p>Boolean类型,写到data中去
• xxx是数组
  <p :class=['aClass','bClass']>小凡</p>直接指定类名就行

style语法:style={color:data里面的数据}

• <p :style={color:iscolor}>小凡</p>iscolor写在data中去

条件渲染

1. v-if:把标签移除(再显示需要在内存中创建)
2. v-show:元素样式隐藏(内存中对象还在)—频繁切换用它

 	<p v-if="ok">成功了</p>
    <p v-else>失败了</p>
    <button @click="ok=!ok">切换</button>

	<p v-show="ok">表白成功了</p>
    <p v-show="!ok">表白失败了</p>

列表渲染

v-for

• 遍历数组：v-for="(item index) in list" :key="index"
• 遍历对象 ：v-for="(value,key) in obj " :key="key"

注意的地方：

• 如果没有改变list本身,只是改变了数组对象内部的数据，vue并不知道这种改变,只是监视了list的改变,没有监视内部对象
• 内部对push(),pop(),shift(),unshift(),splice(),sort(),reverse()的重写(1.先调用原生的方法,2.更新界面)数组内部变化,自动更新界面

	 data: {//代表model层
            //1 并没有改变list本身,vue并不知道这种改变,只是监视了list的改变,没有监视内部对象
            //2 内部对push(),pop(),shift(),unshift(),splice(),sort(),reverse()的重写(1.先调用原生的方法,2.更新界面)
            //数组内部变化,自动更新界面
            list: [
                {title: "奥迪", price: 18999},
                {title: "宝马", price: 5999},
                {title: "奔驰", price: 3323},
                {title: "凯迪拉克", price: 14546},
            ]
        },
        methods: {
            //删除某一个
            handle(index) {//这里splice可以更新界面
                this.list.splice(index, 1)
            },
            //更新某一个
            update(index) {
                // this.list[index].age = 78//  }//没调方法,没有调用变异方法,vue不知道,不会更新界面
                this.list.splice(index, 1, {title: "别克", price: 9999})
            }
        }

搜索和排序

 <input type="text" v-model="searchTitle">
    <ul>
        <li v-for="(item,index) in filterList" :key="index">
            品牌:{{item.title}}----价格:{{item.price}}----点击数:{{item.click}}
        </li>
    </ul>
<button @click="orderModel=0">原始排序</button>
<button @click="orderModel=1">价格升序</button>
<button @click="orderModel=2">价格降序</button>
<button @click="orderModel=3">点击升序</button>
		data: {
            list: [
                {title: "奥迪1", price: 18999, click: 23},
                {title: "宝马1", price: 5999, click: 54},
                {title: "奔驰", price: 3323, click: 32},
                {title: "凯迪拉克1", price: 14546, click: 13},
            ],
            searchTitle: '',
            orderModel: 0//0为原始排序,1为价格升,2为价格降,3为点击数升
        },
		computed: {
            filterList() {
                //得到相关的数据
                const {searchTitle, list, orderModel} = this
                //对list进行过滤
                const newArr = list.filter(item => item.title.includes(searchTitle))
                if (orderModel === 0) {//为0的时候就不排了
                    return newArr
                }
                return newArr.sort((a, b) => {
                    if (orderModel === 1) {
                        return a.price - b.price
                    } else if (orderModel === 2) {
                        return b.price - a.price
                    } else if (orderModel === 3) {
                        return a.click - b.click
                    }
                })
            }
        },

事件处理

• 绑定事件监听@click=回调函数(要传的参数,$event)同时传入参数以及获取事件对象身上的值,可以这样写
  <button @click="handle(112,$event)">按钮</button>-------$event可以用
  handle(a, event) { console.log(a, event.target.innerText) }
• 事件修饰符–停止事件冒泡,在内部元素事件后面加上.shop—阻止默认行为的用.prevent
• 按键修饰符@keyup.enter=""表示enter键抬起时候触发回调函数

表单输入的判断—自动收集表单信息

用v-model去拿到value的值
阻止表单的默认提交行为:@submit.prevent=""阻止默认行为

• text/textarea
• checkbox
• radio
• select

记住一句话:v-model永远得到的是value的值,修改的也是value的值

  	<select v-model="cityId">
            <option>未选择</option>
            <option :value="item.id" v-for="(item) in city">{{item.name}}</option>
        </select><br>