一、导入vue.js

1.可以借助 script 标签直接通过 CDN 来使用 Vue

<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->

2.也可以下载vue.global.js文件并在本地导入

    <script src="./lib/vue.global.js"></script>

二、创建Vue对象

<script>
      const { createApp, ref } = Vue
      createApp({
        data() {
          return { message: 1 }
        }
      }).mount('#app')
</script>

三、如何插入值

在双大括号中输入变量、表达式后，界面会随着变量、表达式的结果而发生变化（注意message作为变量不带引号，而a、b作为常量需要带引号）

<div id="app">
      <P>{{ message }}</P>
      <p>{{ 10 + 20 }}</p>
      <p>{{ 10 > 20 ? 'a' : 'b' }}</p>
</div>

以上结果为：

四、指令

1、v-show

控制元素的显示隐藏，隐藏时的属性为：display:none

html代码:

<div v-show="isShow">v-show测试</div>
<button @click="changeShow()">v-show测试</button>

javascript:

<script>
      const { createApp, ref } = Vue
      const vm = createApp({
        data() {
          return { 
	          message: 1, 
	          isShow: true
          }
        },
        methods: {
          changeShow() {
            return (this.isShow = !this.isShow)
          }
        }
      }).mount('#app')
</script>

2、v-if 、v-else-if、v-else

控制元素的创建和删除

html代码：

isCreate =1时创建 v-if测试，删除其他两项
isCreate =2时创建 v-else-if测试，删除其他两项
isCreate =3时创建 v-else测试，删除其他两项

<div v-if="isCreate===1">v-if测试</div>
<div v-else-if="isCreate===2">v-else-if测试</div>
<div v-else>v-else测试</div>
<button @click="changeCreate()">if条件测试</button>

javascript:

<script>
      const { createApp, ref } = Vue
      const vm = createApp({
        data() {
          return {
            message: 1,
            isCreate: false
          }
        },
        methods: {
          changeCreate() {
            if (this.isCreate >= 3) {
              this.isCreate = 0
            }
            return this.isCreate++
          }
        }
      }).mount('#app')
    </script>

3、v-html

通过该指令插入html元素

html代码：

<div v-html="myhtml"></div>

javascript:

<script>
      const { createApp, ref } = Vue
      const vm = createApp({
        data() {
          return {
            myhtml: '<p>插入html</p>'
          }
        }
      }).mount('#app')
</script>

演示结果：

4、v-for

遍历数组并赋值、根据数组长度创建元素

html代码：

<ul>
  <li v-for="item in datalist">{{ item }}</li>
</ul>

javascript:

<script>
      const { createApp, ref } = Vue
      const vm = createApp({
        data() {
          return {
            datalist: ['111', '222', '333']
          }
        }
      }).mount('#app')
</script>

演示结果：

五、动态设置class属性

注意 class属性前缀需要加冒号

方式一：

html代码：

<div :class="isChage?'redClor':'yellowClor'">动态设置class属性1</div>
<button @click="isChageFn()">动态设置class属性1</button>

<style>
  .redClor{
    background-color: red;
  }
  .yellowClor{
    background-color: yellow;
  }
</style>

javascript:

<script>
      const { createApp, ref } = Vue

      const vm = createApp({
        data() {
          return {
            isChage: true
          }
        },
        methods: {
          isChageFn() {
            return (this.isChage = !this.isChage)
          }
        }
      }).mount('#app')
    </script>

结果展示：

初始： class =“red”

点击按钮后：class=“yellow”

方式二、

html代码：

<div :class="isChangeClass">动态设置class属性2</div>

javascript:

<script>
      const { createApp, ref } = Vue
      const vm = createApp({
        data() {
          return {
            isChangeClass: {
              a: true,
              b: true
            }
          }
        }
      }).mount('#app')
</script>

初始：class=“a b”

----------------------------------------------------------------------------------------------------
1.在浏览器控制台修改 vm.isChangeClass.a=false 后 : class=“b”

----------------------------------------------------------------------------------------------------

2.在浏览器控制台修改 vm.isChangeClass.b=false 后 : class=“a”

----------------------------------------------------------------------------------------------------

3.在浏览器控制台修改 vm.isChangeClass.c=true 后 : class=“c”

----------------------------------------------------------------------------------------------------

方式三、

html代码：

<div :class="isChangeArr">动态设置class属性3</div>

javascript:

<script>
      const { createApp, ref } = Vue
      const vm = createApp({
        data() {
          return {
            isChangeArr: ['a', 'b']
            }
          }
        }
      }).mount('#app')
</script>

初始：class=“a b”

----------------------------------------------------------------------------------------------------

1. 在浏览器控制台修改 vm.isChangeArr.pop() 后 : class=“a”

----------------------------------------------------------------------------------------------------

2. 再次在浏览器控制台修改 vm.isChangeArr.pop() 后 : class

----------------------------------------------------------------------------------------------------

3. 再次在浏览器控制台修改 vm.isChangeArr.push(‘c’) 后 : class=“c”

----------------------------------------------------------------------------------------------------

六、动态设置style属性

html代码：

<div :style="isStyleChange">动态设置style属性1</div>
<div :style="isStyleChangeObj">动态设置style属性2</div>
<div :style="isStyleChangeArr">动态设置style属性3</div>

javascript:

<script>
      const { createApp, ref } = Vue
      const vm = createApp({
        data() {
          return {
            isStyleChange: 'background-color:red',
            isStyleChangeObj: {
              backgroundColor: 'red',
              fontSize: '30px'
            },
            isStyleChangeArr: ['background-color:yellow']
            }
          }
        }
      }).mount('#app')
</script>