Vue3最全基础指令

一，概述构建用户界面的渐进式JavaScript框架前段框架：Vue 尤雨溪React Facebook脸书Angular googleJquery二，安装<script src="vue.js">三，实例化模板<div id = "app"> </div>创建appconst app = Vue.createApp({data(){return {}}}...

洋芋坨坨！

2991人浏览 · 2022-02-24 19:38:03

洋芋坨坨！ · 2022-02-24 19:38:03 发布

一，概述

构建用户界面的渐进式JavaScript框架
前段框架：

Vue 尤雨溪
React Facebook脸书
Angular google
Jquery

二，安装

<script src="vue.js">

三，实例化

模板

创建app

        const app = Vue.createApp({
         data(){return {}}
        })

挂载

app.mount("#app")

完整代码

<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg"/>
			<p>{{msg}}</p>
		</div>
		<script type="text/javascript">
			//创建一个app
			const app = Vue.createApp({
				//定义数据data
				data(){
					//返回msg
					return {msg:"你好Vue"}
				}
			})
			//把app挂载到#app节点
			var vm = app.mount("#app")
		</script>
	</body>

四，内置指令

内置指令v-开头的特殊属性练联系html模板与javascript数据模型
文本渲染

v-text 相当于js中的innerText

<body>
		<div id="app">
			<p v-text="msg"></p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						msg: "vue棒棒哒~"
					}
				}
			}).mount("#app");
		</script>
</body>

v-html 相当于js中的innerHTML

<body>
		<div id="app">
			<p v-html="msg"></p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						msg: "vue<i>棒棒</i>哒~"
					}
				}
			}).mount("#app");
		</script>
</body>

{{msg}} 只能写一行表达式，不能写复杂js，如：if

<body>
		<div id="app">
			<p>{{msg}}</p>
			<p>{{1+2}}</p>
			<p>msg的长度是:{{msg.length}}</p>
			<!-- 转数组  翻转  再转字符串 -->
			<p>{{msg.split('').reverse().join(' ')}}</p> 
			<p>{{9>8?'yes':'no'}}</p>
			
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						msg: "vue棒棒哒~"
					}
				}
			}).mount("#app");
		</script>
</body>

属性渲染

v-bind: 属性名=“值” 简写 :属性名=“值”

<body>
		<div id="app">
			<p :title="msg">我是个p</p>
			<p v-bind:title="msg">我是个大p</p>
			<button :disabled="!canUse">按钮</button>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						msg: "我学vue，我骄傲",
						canUse:true,
					}
				}
			}).mount("#app");
		</script>
</body>

条件渲染指令

v-if

	<body>
		<div id="app">
			<p v-if="isLog">欢迎回来~</p>
			<p v-else>请登录！</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						isLog:false
					}
				}
			}).mount("#app");
		</script>
	</body>

v-else v-else if

<body>
		<div id="app">
			<p v-if="score>=90">优秀</p>
			<p v-else-if="score>=80">良好</p>
			<p v-else-if="score>=70">中等</p>
			<p v-else-if="score>=60">及格</p>
			<p v-else>不及格</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						score:99
					}
				}
			}).mount("#app");
		</script>
</body>

v-show

<body>
		<div id="app">
			<p v-if="can">显示</p>
			<p v-show="can">也显示</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						can:true
					}
				}
			}).mount("#app");
			
		</script>
</body>

两者区别：v-show是通过css方法隐藏节点，v-if是直接移除节点方式隐藏，频繁切换显示与隐藏 v-show，偶尔切换显示隐藏 v-if

列表渲染指令

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

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

举例说明如下

<body>
		<div id="app">
		<ul>
			<li v-for="(item,index) in list" :key="item">{{item}}-->{{index}}</li>
		</ul>
		<!-- key属性是为了让vue内部给遍历的节点给一个唯一的标识，已便更好的去（排序，过滤等操作）为了性能优化，key要唯一 -->
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						list:["Vue","react","angular"]
					}
				}
			}).mount("#app");
			
		</script>
</body>

for对象

<body>
		<div id="app">
			<div v-for="(value,key) in obj" :key="key">{{key}}:{{value}}</div>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						obj:{title:"Vue3入门",author:"abc",pdate:"2022-2-24"}
					}
				}
			}).mount("#app");
			
		</script>
</body>

for与if同时使用

<body>
		<div id="app">
			<template v-for="item in 10">
				<p v-if="item%2===0">{{item}}</p>
			</template>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {}
				}
			}).mount("#app");
		</script>
</body>

事件响应

v-on：事件名=“事件响应”

v-on：click="num++"

@click="num++"

行内处理

@click="num++"

方法响应

@click="say"

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

内联传参

@click="say(msg,$event)"

//$event当前单机的事件对象，x，y位置元素

say(msg,e){}

事件修饰符

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

按键修饰符：确定哪个按键被按下

.enter 回车
.esc 取消
.delete 删除
.space 空格
.left .right .up .down

系统修饰符

.ctrl
.shift
.alt

鼠标修饰符

.left
.right
.middle

五，监听

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

值类型监听

watch:{
 "num":function(){
    ......
  }
}

引用类型监听
nval 数据最新的值
oval 数据之前的值

watch:{
  obj:{
    handler(nval){...},
    deep:true
  }
}

六，计算

computed是计算属性，主要作用是把数据存储到内存中，减少不必要的请求，还可以利用computed给子组件的data赋值。

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

<body>
		<div id="app">
			<h1>计算</h1>
			<p>{{msg}}</p>
			<input type="text" v-model="msg">
			<p>{{rmsg}}</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				computed:{
					"rmsg":function(){
						return this.msg.split('').reverse().join('')
					}
				},
				data(){
					return {
						msg:'你好今天天气很好'
					}
				}
			}).mount("#app")
		</script>
</body>

七，自定义指令directives

directives自定义指令，是一个对象，属性就时自定义指令的名称，对象的值是一个函数
函数的第一个参数是使用这个指令的元素，参数2是传递过来的值

<body>
		<div id="app">
			<input type="text" v-focus="flag">
			<button @click="flag=!flag">获取</button>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {flag:true}
				},
				//自定义指令   操作dom
				directives:{
					"focus":{
						// mounted  当dom节点挂载后执行
						// beforeUpdate  更新前
						beforeUpdate(el,binding){
							// el 指令所在的dom节点
							// binding.value  指令的值  
							console.log(el,binding);
							//如果指令的值为真，则获取焦点，否则失去焦点
							if(binding.value){
								el.focus()
							}
						}
					}
				}
			}).mount("#app")
		</script>
</body>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^