Vue3.0 一些知识点开你就会了

完全靠猜

于 2022-02-28 21:48:38 发布

阅读量125

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/Wpl6666/article/details/123192821

版权

创建应用实例-完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个vue案例</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
	    <div id="app">
   		hello Vue!
	    </div>
	    <script>
		const app = Vue.createApp({
  			data() {
    				return { count: 4 }
 			 }
		})
		const vm = app.mount('#app')
		console.log(vm.count) // => 4
	    </script>
	</body>
</html>

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

		<script type="text/javascript">
			Vue.createApp({
				methods: {
					say(msg) {
						alert(msg)
					}
				}
			}).mount('#app')
		</script>

事件修饰符

.stop 阻止事件冒泡 .prevent 阻止默认事件

.capture 捕获 .self 自身元素触发

.once 执行一次 .passive 滚动立即触发，不等待滚动完成（移动端性能提升）

监听键盘事件时，我们经常需要检查特定的按键。可以使用按键修饰符

按键修饰符

Vue 为最常用的键提供了别名

.enter 回车 .tab 制表

.delete “删除”和“退格”键 .esc 取消

.space空格

.up 上 .down 下 .left 左 .right 右

系统修饰键

按下相应按键时才触发鼠标或键盘事件的监听器。

.enter 回车 ctrl .alt .shift .meta (⌘或Windows 徽标键 ⊞) .exact 精确

鼠标按钮修饰符

.left .right .middle 这些修饰符会限制处理函数仅响应特定的鼠标按钮。

计算computed

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性（从现有数据计算出新的数据）

const app = Vue.createApp({
    computed: {		 
        rmsg: function() {						 
            return this.msg.split('').reverse().join('')
        }
    }
}).mount("#app")


<p>计算翻转的信息: {{ rmsg }}</p>

监听watch

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

watch:{
    num(nval,oval){
        console.log(nval,oval)
    }	 
}

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

watch:{
    person:{
        handler(state){
            console.log(state);
            localStorage.setItem("age",this.person.age);
        },
        deep:true
    }
	 
}

Class 与Style

操作元素的 class 列表和内联样式因为它们都是 attribute Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组

<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
>你好class绑定</div>

data() {
  return {
	isActive: true,
	hasError: false
  }
}

上面的语法表示 active 这个 class 存在与否将取决于 isActive值

数组语法

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

Style内联样式

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

内置指令directives

除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。

你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

全局注册

<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")

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

created：创建。

beforeMount：父组件挂载前

mounted：挂载后。

beforeUpdate：更新前

全局配置过滤

app.config.globalProperties.$filters = {
  USD(value) {
    return '$' + value
  }
}

 <p>{{ $filters.USD(100) }}</p>

完全靠猜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3.0 一些知识点开你就会了

创建应用实例-完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>第一个vue案例</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> hello Vue!
复制链接

扫一扫