Vue2-模板语法

买米当卡思思酱

已于 2024-05-13 15:58:45 修改

阅读量1k

点赞数 3

文章标签：前端 javascript vue.js

于 2024-04-24 18:00:25 首次发布

本文链接：https://blog.youkuaiyun.com/yulingpan123/article/details/138003330

版权

1.template模板的三种方式

[方法一]写在 HTML 中的 template 不会在vue实例运行后改变。

[方法二]当 template 写在 new Vue() 构造选项中，vue实例运行时 template 中 XML 的内容会替换 HTML 中的挂载点，即 div#app 在vue实例运行后消失。

[方法三] .vue文件中的 template 是 XML 语法 ，<script> 导出的默认选项中 data 必须写为函数（防止组件中 data 被多次引用出现数据混乱），且<script>如果若再出现 template 则会覆盖当前的文件的<template>

#XML 与 HTML 区别:

/* HTML [单标签]可写or不写 / ; 空标签也要写双标签 ; 不区分大小写*/
<input name="username">     -HTML *
<input name="username" />   -HTML
<div></div>

/* XML [单标签]必须写 / ; 空标签可以写自闭和标签 ; 区分大小写*/
<input name="username" />   -XML
<div />

##为什么在 template 中使用 XML ?? 
##HTML 语法较为松散, XML 语法更为严格
##使用 XML 表示 HTML,不需要兼容各种语法,解析器体积更小

2.Vue.js模板语法

#展示内容

new Vue({
    template:`
      <div>
        /* 显示文本 绑定元素textContent */ 
        {{ n }}
        {{ add(n) }}
        <div v-text="n+2"></div>

        /* 显示HTML 绑定元素innerHTML */ 
        <div v-html="rawHtml"></div>

        /* 直接显示跳过编译 */
        <div v-pre>{{ n }}</div>
      </div>
    `,
    data:{
        n: 0,
        rawHtml:"<b>粗体</b>"
    },
    methods:{
        add: function (x) {
            return x += 10
        }
    }
}).$mount("#app")

## {{}} 插值表达式
## 将数据以 字符string 形式返回给 DOM

#绑定数据

new Vue({
    template:`
        <div>
          /* 绑定属性 */
          <img v-bind:src="x">
          <img :src="x">

          /* 绑定对象 */ 
          <div :style="{border: '1px solid black',background: 'grey',width: '100px',height: '100px'}">
          </div>
        </div>
    `,
    data:{
        x:"https://img2.baidu.com/it/u=2046342660,1967664903&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800",
    },
    methods:{

    },
}).$mount("#app")

## v-bind(:) 单向绑定
## 单向绑定 vue 中 data 数据

#绑定事件

new Vue({
   template:`
       <div>
         {{ n }}

         /* 绑定事件 自动补全add(),运行函数 */
         <button v-on:click="add">+10</button>
         <button @click="n+=1">+1</button>

         /* function存在()不会自动补全,直接运行xxx(1) */
         <button v-on:mousemove="xxx(1)">xxx</button>
       </div>
   `,
    data:{
       n: 0
    },
    methods:{
       add(){
           return this.n+=10
       },
        xxx(x){
           console.log(x)
       }
    }
}).$mount("#app")

## v-on:事件名 = "f()"，不会自动调用f()()
## 如果f()返回一个函数,则不会调用 [返回函数return fn]
## 可以把 [返回函数return fn] 写入 data 中,用中间变量运行 [返回函数return fn]

#条件判断

new Vue({
   template:`
       <div>
         {{ n }}

         <div v-if="n>=100"> n>=100 </div>
         <div v-else-if="n>50"> 100>n>50 </div>
         <div v-else> n<=50 </div>

       </div>
   `,
    data:{
       n: 89
    },
}).$mount("#app")

## v-if 将满足判断的元素添加到 DOM 树中   | document.createElement + .appendChild
## 条件为 false 时,vue 将 v-if 相关元素及其所有子元素从 DOM 树中移除  | .remove()

#循环

new Vue({
   template:`
       <div>
         /* 循环输出数组 */
         <ul>
           <li v-for="(n,index) in arrs" :key="index">
            index:{{index}} value:{{n}}
           </li>
         </ul>

         /* 循环输出对象 */
         <ul>
           <li v-for="(value,property) in obj" :key="property">
             属性名: {{property}}  属性值: {{value}}
           </li>
         </ul>
         
       </div>
   `,
    data:{
       arrs: [1,2,3,5,9],
       obj:{
         name: "frank",
         age: 18,
         gender: "male"
       }
    },
}).$mount("#app")

#显示

new Vue({
   template:`
       <div>
         <div v-show="n%2==0"> n为偶数 </div>
       </div>
   `,
    data:{
       n:10
    },
}).$mount("#app")

## v-show 是通过 CSS 进行隐藏 , 无论隐藏与否元素都在 DOM 中
## true 则显示 ; false 则将元素 display: none

3.指令与修饰符

修饰符文档：事件处理 — Vue.js

#v-on 修饰符

new Vue({
   template:`
       <div>
         /* 修饰符.prevent 阻止默认动作 */
         <a @click.prevent href="https://www.baidu.com">百度</a>

         /* 修饰符.{keycode | keyAlias} 事件绑定特殊键处理函数 */
         /* <input @keypress="x" type="text"> */ 
         <input @keypress.13="y" type="text">
         <input @keypress.enter="x" type="text">
       </div>
   `,
    data:{
    },
    methods:{
       /*
       * x(e){
       *    if(e.keyCode === 13){
       *       console.log("用户打了回车")
       *    }
       * }, 
       * */
       y(e){
           console.log("用户打了回车")
       }
    }
}).$mount("#app")

#组件通信

/* main.js */
import Child from "./Child.vue"

new Vue({
   components:{
       Child
   },
   template:`
       <div :style="{border: '3px solid green',padding: '5px'}">
         APP.vue 现在有$ {{total}}

         /* .sync 实现父子组件双向数据绑定
          * [事件名格式] v-on 监听子组件 update:value 事件
         */
         <Child :money="total" v-on:update:money="total = $event"/>
         <Child :money.sync="total" />
       </div>
   `,
    data:{
       total: 100
    },
    methods:{

    }
}).$mount("#app")

/* Child.vue */
<script >
export default{
  /* props 父组件->子组件 传值 */
  props:["money"]
}
</script>

<template>
  <div class="child">
    {{money}}

    /* $emit(events,[...args]) 子组件->父组件 传值 */
    <button @click="$emit('update:money',money -= 10)">
      <span>spend money</span>
    </button>
  </div>
</template>

<style scoped lang="scss">
.child{
  background: pink;
}
</style>

## .sync 简化了父子组件 props/$emit 数据传递 | [节省事件监听]
## props 实现父组件向子组件传递数据 ; 监听子组件事件,通过 $event 得到子组件事件信息
## 子组件不允许直接修改 props父组件数据 ,通过 $emit()自定义事件 向父组件传递子组件数据