<script>
const app=Vue.createApp({
data(){
return{ count:4}
}})
const vm=app.mount('#app')
document.write(vm.$data.count) //4
document.write(vm.count) //4
//修改vm.count的值也会更新$data.count
vm.count=5
document.write(vm.$data.count) //5
//相反也是一样
vm.$data.count=6
document.write(vm.count) //6
</script>以上实例仅在实例首次创建时被添加，所以需要确保他们都在data函数返回的对象中。
方法
我们可以在组件中添加方法，使用methods选项，该选项包含了所需方法的对象。
以下实例我们添加了methods选项，选项中包含了increment（）方法：
<script>
const app=Vue.createApp({
data(){
return { count:4}
},
methods:{
increment(){
//this 指向该组件实例
this.count++
}}})
const vm=app.mount('#app')
document.write(vm.count) //4
document.write("<br>")
vm.increment()
document.write(vm.count) //5
</script>Vue3模板语法
Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。
Vue的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。
结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到dom操作上。
插值
文本
数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值：
{{ message}}
const HelloVueApp={
data(){
return {
message:'hello world'}}}
Vue.createApp(HelloVueApp).mount('#hello-vue'){{}}标签的内容将会被替代为对应组件实例中message属性的值，如果message属性的值发生了改变，{{}} 标签内容也会更新。如果不想改变标签的内容，可以通过使用v-once指令执行一次性地插值，当数据改变是，插值的内容不会更新。
<span v-once>这个将不会改变:{{message}}</span>Html
使用v-html指令用于输出HTML代码：
<div id="example1" class="demo">
<p>使用双大括号的文本插值：{{rawHtml}} </p>
<p>使用 v-html 指令:<span v-html="rawHtml"></span></p>
</div>
const RenderHtmlApp={
data(){
return {
rawHtml:'<span >这里会显示红色！！！！！！！</span>'}}}
Vue.createApp(RenderHtmlApp).mount('#example1')属性
HTML属性中的值应使用v-bind指令
<div v-bind:id="dynamicId"> </div>对于布尔属性，常规值为TRUE或false，如果属性值为null或undefined，则该属性不会显示出来。
<button v-bind:disabled="isButtonDisabled">按钮</button>以上代码中如果isButtonDisabled的值是null或undefined，则disabled 属性甚至不会被包含在渲染出来的<button>元素中。
以下实例判断use的值，如果为TRUE或使用class1类的样式，否则不使用该类：
<style>
.class1{
background:red;
color:blue;
}
</style>
<div id="app">//HTML标签中的for属性用于表单绑定，对应这ID
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br>
<div v-bind:class="{'class1':use}">
v-bind:class指令
</div>
</div>
<script>
const app1={
data(){
return{
use:true
}}}
Vue.createApp(app1).mount('#app')
</script>表达式
Vue.js都提供了完全的JavaScript表达式支持。
<div id="app">
{{5+5}}<br>
{{ok ? 'YES':'NO'}}<br>
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-' +id">测试文本</div>
</div>
<script>
const app1={
data(){
return {
ok:true,
message:'ABCD!!!!!!!',
id:1
}}}
Vue.createApp(app1).mount('#app')
</script>
