Vue3学习笔记（2.0）

<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 style="color:red">这里会显示红色！！！！！！！</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>