day20

Vue笔记

1 Vue实例 （VM）

var vm = new Vue({
    el:'#app', //挂载元素
    
    //数据
    data: {
        title:'值',
        ....
        dataList:[]
    },
    
    //方法
    methods: {
        方法名: function(){
    
        },
         ...
    },
        
    //计算属性
    computed: {
        属性名： function(){
            return 值
        }  
    }
    
    //监听属性
    watch: {
        属性名: function(){
            
        }
    }
        
    //钩子方法
    //数据创建成功 data methods computed watch
    //在这里从服务器获取数据
    created: function(){
        
    },
    //vue实例 已经挂载到元素上
    // dom操作 在这里
    mounted: function(){
                
    }
    
})

数据驱动   
Vue.set()  或者 vm.$set()
​
vue实例 的对象
vm.$data
vm.$el
vm.$watch()

Vue.set(数组, 索引, 新值)
Vue.set(对象, 属性, 新值)

2 Vue视图 （V） 模板

2.1 插值

{{  }}
<p v-text=""></p>
<p v-once>{{}}p>
<p v-html=""></p>
​
防止闪烁 v-cloak

2.2 绑定属性

v-bind:属性=值
:属性=值
v-model="" 用于表单控件  双向数据绑定

2.3 指令

v-bind
v-on
v-cloak
v-for
v-if
v-else
v-else-if
v-show
v-text
v-html
v-once
v-model
v-pre

2.4 条件渲染

v-if="表达式"  表达式的返回值是boolean
v-else
v-else-if
提高效率： 使用 key="唯一值"  v-bind:key="" 
​
​
v-show="布尔值"

2.5 v-for 列表渲染

v-for   通常都需要指定 key 保证唯一值
​
<p v-for="item in itemList">
<p v-for="(item,index) in itemList">
<p v-for="(val,key) in obj">

da20

选项卡 bootstrap+vue

2.6 样式绑定

class绑定

<p :class="对象">
<p :class="数组">
<p :class="{类名:true/false, 类名:true/false}">

style绑定

<p :style="{color:'值', background:'值'}">
<p :style="[{}, {}, {}]">

2.7 事件

事件绑定

<p @事件名="方法">
<p v-on:事件名="方法">
方法加 () 的问题 
<p @事件名="方法(1,1,2,3,$event)">

事件修饰符

.stop  阻止事件冒泡
.prevent  阻止默认动作   
.capture   捕获阶段触发事件
.once      只绑定一次
.self      只有本身才触发
.passive   优化移动端的scroll事件
​
<p @click.stop="">
<p @click.stop.prevent="">

键盘修饰符

.enter
.space
.tab
.up
.left
.right
.down
.delete
.数字 (ascii )

系统按键修饰符

.ctrl
.alt
.shift
.meta
​
<input @keyup.ctrl.enter>  按住ctrl再按回车 

2.8 表单

文本  
input:text textarea   v-model
​
checkbox 单个  true-value  false-value
true/false
​
checkbox 多个 
数组
​
单选按钮  input:redio   v-model  value值
​
select选择框   option的value值     多选 multiple, 数组
​

<input v-model="formData.username">
<input v-model="formData.pwd">

v-model.trim
v-model.number  把值转为 number 类型
v-model.lazy