万象更新 Html5 - vue.js: vue 模板语法基础(MVVM, 插值, 指令等)
万象更新 Html5 - vue.js: vue 模板语法基础(MVVM, 插值, 指令等)
示例如下:
vue\basic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 模板语法基础(MVVM, 插值, 指令等)</title>
<script src="../node_modules/vue/dist/vue.global.js"></script>
<style>
.class1 {
font-size: 36px;
}
.class2 {
color: red;
}
.class3 {
background: blue;
}
[v-cloak] { display: none; }
</style>
</head>
<body>
<!--
下面的 html 介绍了 vue 的模板语法(Template Syntax)的基础,vue.js 会将你的模板语法渲染为最终的 html(也可以称之为编译)
vue 是 MVVM(Model-View-ViewModel)模式的,大部分场景是单向绑定,即 vm 变了 v 就会变
-->
<!--
如果 vue.js 加载慢,那么就会先显示未经 vue 渲染的 html,等到 vue.js 加载完后再显示 vue 渲染后的 html,为了避免这种情况,可以通过如下方式解决
1、在 vue 的根元素上加 v-cloak 指令,然后 css 中加这句 [v-cloak] { display: none; }
2、如果你是通过路由挂载的,那么就不会出现此情况
-->
<div id="root" v-cloak>
<!--插值(interpolation)方式,在 {{ }} 内调用 vue 中定义的属性-->
<div>{{ myMessage }}</div>
<!--插值(interpolation)方式,在 {{ }} 内调用 vue 中定义的方法-->
<div>{{ getMessage() }}</div>
<!--可以使用简单的表达式-->
<div>{{ myBool ? myMessage.split('').join(',') : "" }}</div>
<!--可以和对象的属性绑定-->
<div>{{ myObject.name }} {{ myObject.age }}</div>
<!--指令(directive)方式,就是以下这些在元素上声明 v-xxx 的方式-->
<!--
v-pre 指令: 禁止 vue 渲染
-->
<div v-pre>{{ myMessage }}</div>
<!--
v-pre 指令: 禁止 vue 渲染
v-text 指令: 文本方式显示
v-html 指令: html 方式显示
v-once 指令: 只渲染一次(正常来说 vm 变了 v 就会变,如果用了 v-once 指令则 v 只渲染一次,之后 v 不会再随 vm 的变化而变化)
-->
<div v-text="myMessage"></div>
<div v-html="myMessage"></div>
<div v-once>{{ myMessage }}</div>
<!--在指令中可以使用简单的表达式-->
<div v-html="myMessage + '_xyz'"></div>
<!--
v-bind 指令: 将 html 元素的指定的属性绑定到 vue 中定义的属性或方法(v-bind: 可以简写为 :)
-->
<!--style 属性与 vue 中定义的 myStyle 属性绑定-->
<div v-bind:style="myStyle">abc</div>
<!--style 属性与 vue 中定义的 getStyle() 方法绑定-->
<div v-bind:style="getStyle()">abc</div>
<!--支持简单的表达式-->
<div :style="'color:' + myColor">abc</div>
<!--style 属性支持 key/value 的方式绑定-->
<div :style="{ color: myColor, fontSize: '48px' }">abc</div>
<!--class 属性支持与多个 vue 中定义的属性绑定,下面这句的结果是 class="class1 class2 class3"-->
<div class="class1" :class="[myClass2, myClass3]">abc</div>
<!--class 属性支持 key/value 的方式绑定(value 为 true 则渲染,value 为 false 则舍弃),下面这句的结果是 class="class2 class3"-->
<div :class="{'class1':!myBool, 'class2':myBool, 'class3':true}">abc</div>
<!--class 属性支持与 vue 中定义的 key/value 类型的属性绑定(value 为 true 则渲染,value 为 false 则舍弃),下面这句的结果是 class="class2 class3"-->
<div :class="myClass">abc</div>
<!--
v-model 指令: 双向绑定(详见: directive/vmodel.html)
-->
<input v-model="myMessage">
<!--
v-on 指令: 事件处理,v-on: 可以简写为 @(详见: directive/von.html)
-->
<!--click 事件会调用 vue 中定义的 updateMessage() 方法-->
<br>
<button @click="updateMessage()">调用 vue 中定义的 updateMessage() 方法</button>
<!--click 事件会调用 js 中定义的 updateMessage() 方法-->
<br>
<button onclick="updateMessage()">调用 js 中定义的 updateMessage() 方法</button>
</div>
<script>
// 定义一个根组件选项
const option = {
// 在 vue 中定义属性,它会存储在组件实例的 $data 中
data() {
return {
myMessage: "hello: vue",
myObject: {
name: "wanglei",
age: 40
},
myStyle: "color: orange",
myColor: "red",
myClass2: "class2",
myClass3: "class3",
myClass: {
'class1': false,
'class2': true,
'class3': true && 1 === 1
},
myBool: true
}
},
// 在 vue 中定义方法(其他还有 computed, watch 等,参见 option.html)
methods: {
updateMessage() {
// this 指向的是当前组件实例
var random = Math.floor(Math.random() * 100);
this.myMessage = "hello: " + random;
},
getMessage() {
return this.myMessage;
},
getStyle() {
return this.myStyle;
}
}
};
// Vue.createApp() - 创建一个 vue 实例(需要指定根组件选项)
// mount() - 挂载指定的 html 节点(此节点将被 vue 渲染),并返回根组件的实例
const vm = Vue.createApp(option).mount('#root');
function updateMessage() {
// 在 js 中调用 vue 中定义的方法(vm 是根组件实例)
var message1 = vm.getMessage();
// 在 js 中获取 vue 中定义的属性(注: $data 可以省略)
// vue 暴露在外的属性或方法一般都是 $ 开头的
var message2 = vm.$data.myMessage;
// 在 js 中设置 vue 中定义的属性
var random = Math.floor(Math.random() * 100);
vm.myMessage = "<span style='color: red'>hello: " + random + "</span>";
}
</script>
</body>
</html>