vue的基础知识点总结

<template>

<h1>监听对象</h1>

<p>computed:{{ numbb }}</p>

<input type="text"  v-model.number="numm"  placeholder="number" />

<p>watch:{{nummm}}</p>

<h3>列表渲染</h3>

<p>对象</p>

/*

v-for  需要指定的key  key要求是唯一   提高虚拟dom比较  (diff)的速度也可以提高对列表进行 过  滤  排序  的渲染速度

key 值在相同的兄弟元素中要求唯一  

 */

<div v-for="(value, key)  in { name: '名字' , age:18 }" :key="key"> {{ key }}:{{value}} </div>

<p>数组</p>

<div v-for="(item ,index) in [5,7,8,1]"  :key="item"> {{index+1}}-{{item}} </div>

<h3>表单修饰符</h3>

lazy   无焦点时响应:{{ change }}]

number  字符串转数字:{{ numm + 10 }}

trim  两端去掉空白 :{{ changee}}

<input type="text" v-model.lazy="change" placeholder="lazy" />

<input type="text" v-model.lazy="numm" placeholder="number" />

<input type="text" v-model.lazy="changee" placeholder="trim" />

<h3>表单</h3>

<p>多选框</p>

<input  type="checkbox" value="唱"  v-model="hobby" /> 唱

<input type="checkbox" value="跳" v-model="hobby" /> 跳

<input type="checkbox" value="玩" v-model="hobby" /> 玩

<p>{{ hobby}}</p>

<p>单选</p>

<input  type="radio"  value="1"  v-model="gender" group="gender" />男

<input type="radio" value="2" v-model="gender" group="gender" />女

<input type="radio" value="3" v-model="gender" group="gender" />保密

<p>{{ gender}}</p>

<p>下拉列表</p>

<select  v-model="gender">

<option  value= "1">男</option>

<option value= "2">女</option>

<option value= "3">保密</option>

</select>

<div> v-if   v-else v-else-if  v-show</div>

<h3>自定义属性</h3>

<div>事件</div>

<h4 :title="context" @click="come('你好', context, $event)">

点我 也能有事件

</h4>

<p :style="{ color: 'blue', fontSize: '20px' }">颜色一号</p>

<p :style="{ color: 'red' }">颜色二号</p>

<!-- 后面判断是否绑定 -->

<p :class="{ active: agree, bold: true }">颜色三号</p>

<p class="active">{{ msg }}</p>

<input type="range" v-model.number="num" />

<p v-if="num > 10">看见</p>

</template>

<script>

export default {

// 生命周期

beforeCreate() {

// 有this data与methods 没有准备好

},

created() {

// 有data 和methods $el和实例没准备好

},

beforeMount() {

// 有$el 但是指令没有渲染

},

mounted() {

// 指令被渲染真实的dom

},

beforeUpdate() {

// dom没有渲染

},

updated() {

// dom渲染完毕

// 只要data更新 update和beforeupdate 都会被执行

},

beforeUnmount() {

// dom和methods可以正常访问

// v2beforeDestory

},

unmounted() {

// 卸载完毕 data和methods 访问不到 数据和模块切断练习

// v2 destoryed

},

computed: {

numbb: function () {

return this.numm + 2;

},

},

watch: {

numm: {

handler() {

this.nummm = this.numm + 3;

// console.log(11);

},

deep: true,

},

},

data() {

return {

nummm: 0,

numm: 10,

change: "",

changee: "",

gender: 1,

hobby: ["唱"],

msg: "哈哈哈",

num: 0,

context: "我是自定义属性",

agree: false,

};

},

methods: {

come(e, e2, e3) {

console.log(e, e2, e3);

},

},

};

</script>

<style lang="scss">

.active {

color: red;

}

.bold {

color: purple;

}

</style>