P2.vue3 创建vite项目 + 声明式变量等 简单的前端实例

• 在console中重新给test56 赋值

创建vite项目

需要注意自己的npm版本，不同的版本命令不通

目录介绍

• public 静态资源
• src 源代码
• main.js 入口文件
• App.vue 根组件

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

• 实例

App.vue

<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj'
      }
    }
  }
</script>

模版语法

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
    <p v-once>{{test57}}</p> //注意看这里打死不会变的
  </div>
</template>

<script>
  export default{
    data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj'
      }
    },
    methods:{
      changeUname: function (){
        this.test58='66666666666666'
      },
    },
  };
</script>



<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
    <p v-once>{{test57}}</p> //注意看这里打死不会变的
    <button @click="changeUname">changename</button>
  </div>

</template>

<script>
  export default{
    data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj'
      }
    },
    methods:{
      changeUname: function (){
        this.test57='66666666666666'
      },
    },
  };
</script>

• 当删除 v-once

让内容 以html显示

<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
    <p v-once>{{test57}}</p>
    <button @click="changeUname">changename</button>
    <p>{{msg}}</p>
    <p v-html="msg"> </p>
  </div>

</template>

<script>
  export default{
    data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj',
        msg:"<h2>标题56</h2>>"
      }
    },
    methods:{
      changeUname: function (){
        this.test57='66666666666666'
      },
    },
  };
</script>