Vue的基本语法

1.前置准备

在vue页面的   script  标签中写入

export default {
        name: 'Test1',
        data () {
            return {
              key: '测试1--OK',
              ins: "<p style='color:red;'>welcome</p>",
              num1: 20,
              colorShow:'blue',
              times: '2023-06-01 23:23:23',
              msg: 'welcome to china'
            }
        }

}

在 vue页面的 style 标签中写入

    .red{
        background-color: red;
    }
    
    .blue{
        background-color: blue;
    }

在vue页面的 template 标签中写入 

<div  class='main'>   

</div>

2.插值运算符 {{ }}

vue 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

比如 ：在 class='main' 的  div 中 加入

<h1>{{ key }}</h1>

<h2>{{ ins }}</h2>

表示把  data 中的 key 和 ins 数据绑定到页面上。

结果如下：

注意：{{ }}  并不会考虑 html 的语法的效果 只是显示纯文本。

3. v-html  会显示 html语法对应的效果

比如：在 class='main' 的  div 中 加入

<h2 v-html="ins"></h2>

结果如下：

4. 双向绑定： v-model

修饰符.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：也就是敲 enter 键才触发改变

比如：在 class='main' 的  div 中 加入

  <div>
            <p>
                请输入:
                <textarea v-model.lazy="msg" cols="40" rows="3"></textarea>
            </p>
            <div v-html="msg"></div>
  </div>

可以让 data 中的msg 属性随着 文本的输入 改变而改变

5.v-bind用于绑定属性和数据 

v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id == :id

比如：在 class='main' 的  div 中 加入

<p :class="colorShow">
            数字
        </p>

表示显示 蓝色的数字 ，因为 :class="colorShow"  表示 class='blue' 

6. v-on 用于绑定触发事件

 完整事件处理语法 

  <a v-on:click="doSomething"></a>

 缩写 

 <a @click="doSomething"></a>

比如：在 class='main' 的  div 中 加入

<p> <button @click="changeBg">改变背景</button> </p>

在 script 标签中加入：

methods: { 
            changeBg(){
                if( this.colorShow == 'blue'){
                    this.colorShow = 'red';
                }else{
                    this.colorShow = 'blue';
                }
            }
        }

表示：添加一个按钮 ‘改变背景’，绑定1个鼠标单击事件，点一下变红再点一下变蓝。