Vue基础概叙

1. 实例化

	<div id="app">
			<input type="text" v-model="msg"/>
			<p>{{msg}}</p>
		</div>
		<script type="text/javascript">
			const app = Vue.createApp({
				data(){
					return{msg:"你好vue"}
				}
			}).mount("#app")
		</script>

2 内置指令---文本渲染

v-text

{{msg}}

v-html

3 属性渲染

v-bind:属性名=“值”

:属性名=“值”

4 条件渲染

v-if
v-else-if
v-else

v-show

v-show隐藏式css方式
v-if隐藏式移除节点
频繁切换用v-show，反之用v-if

5 列表渲染指令

v-for=“(item,index) in list” :key="item"

item 变量的当前数据
index 当前的下标

key是给vue遍历的节点一个唯一的标识符，更好的让vue去做排序过滤等操作，为了性能的优化，要求在一个for指令里面key的值要唯一

遍历对象
v-for="(value,key) in obj"

范围
v-for="item in 5"

v-for与v-if用template
<template v-for="item in 10" >
    <p v-if="item%2===0">{{item}}</p>
</template>

6 事件响应

v-on:事件名=“事件响应”
v-on:click="num++"
@click="num++"

行内处理 @click="num++"

方法响应 @click="say"

methods:{
say(e){ //默认会有个事件参数}
}

内联传参

@click=“say(msg,$event)”
// $event当前单击的事件对象，x,y,位置，元素

say(msg,e){}

事件修饰符

.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 执行一次

按键修饰符

确定那个按键被按下
.enter 回车
.esc 取消
.delete 删除
.space 空格
.left .right .up .down

系统修饰符

.ctrl
.shift
.alt

鼠标修饰符

.left .right .middle

表单绑定

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

表单修饰符

.lazy  转为在 change 事件_之后_进行同步

.number 自动将用户的输入值转为数值类型

.trim 自动过滤用户输入的首尾空白字符

7监听watch

定义：监听数据的变化，执行回调函数

值类型监听
watch:{
"num":fuction(nval,ovl){
        ....
  }
}

nval 数据最新的值
oval 数据之前的值

引用类型监听
watch:{
   obj:{
        handler(nval){ ...},
       deep:true
   }
}

引用数据类型需要添加处理器handler与deep

8计算 computed

computed从现有数据计算出新的数据

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性

（从现有数据计算出新的数据）

9 样式

1class数组语法

我们可以把一个数组传给 :class，以应用一个 class 列表：

<div :class="[activeClass, errorClass]"></div>

2Style内联样式

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

数组语法

<div :style="[baseStyles, overridingStyles]"></div>

内置指令directives

全局注册

<div id="app">

  <input type="text" v-focus>

</div>

<script>

  const app = Vue.createApp({

  })

  app.directive('focus', {

    // 当被绑定的元素挂载到 DOM 中时……

    mounted(el) {

    el.focus() // 聚焦元素

    }

  })

  app.mount("#app")

</script>

 局部注册

const app = Vue.createApp({  

    directives: {

         focus: {

            // 指令的定义

            mounted(el) {

                 el.focus()

  }

         }

    }

}).mount("#app")