<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<style>
.active {
color: red;
}
.bgc {
background-color: lightblue;
}
</style>
<body>
<!-- 引入js -->
<!-- 1. 挂载点:应用实例作用域 -->
<div id="app">
<p>{{message}}</p>
<p v-text = "value"></p>
<div v-html="value"></div>
<p v-once="value"></p>
<p v-bind:style="{color:color,backgroundColor:bgc}">行内样式</p>
<!-- v-bind: 高频指令,可以简化, 冒号“:” -->
<!-- v-bind: 通常定义的是html标签中的"预定义"属性 -->
<p :style="{color:color,backgroundColor:bgc}">行内样式</p>
<!-- vue接管class属性 -->
<p :class="[class1,class2]">vue学习</p>
<p :class="{active:isActive,bgc:isBgc}">样式绑定</p>
</div>
<script>
// 2.vue应用实例
const app = Vue.createApp({
// 根组件配置项
data: function () {
// 组件中要用的数据全部都声明在这个返回的对象中
return {
message: 'hello world',
value :'<em style="color:red;">Hello php.cn</em>',
bgc:'skyblue',
color:'red',
class1:'active',
class2:'bgc',
isActive:true,
isBgc :true
}
}
})
// 3.应用实例 与 挂载点 进行绑定
const vm = app.mount('#app')
// 4. 数据注入: 声明的数据会自动注入到当前应用实例中
console.log(vm);
console.log(vm.message);
// 5. 响应式
vm.message = "vue.js"
</script>
</body>
</html>