创建应用实例-完整代码
<!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 语句中调用方法:
<button @click="say('你好')">问候你好</button>
<button @click="say('吃饭了没')">问候吃饭</button>
<script type="text/javascript">
Vue.createApp({
methods: {
say(msg) {
alert(msg)
}
}
}).mount('#app')
</script>
事件修饰符
.stop 阻止事件冒泡 .prevent 阻止默认事件
.capture 捕获 .self 自身元素触发
.once 执行一次 .passive 滚动立即触发,不等待滚动完成(移动端性能提升)
监听键盘事件时,我们经常需要检查特定的按键。可以使用按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />
按键修饰符
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 列表:
<div :class="[activeClass, errorClass]"></div>
Style内联样式
对象语法: CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
内置指令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>