Vue2第三篇

模板语法

插值

文本绑定

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

对于一些大型项目需要对项目足够的性能优化，这时候你可以选择使用v-once指令对文本进行一次性渲染。

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

原始html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<template>
  <div>
    <h2>动态渲染 HTML 内容</h2>
    <div v-html="htmlContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 假设这是从后端API获取到的富文本内容，包含HTML标签
      htmlContent: '<p>这是一个<strong>包含 HTML 标记</strong>的字符串。</p>'
    };
  }
};
</script>

使用v-html时需要格外注意安全性问题。在这个例子中，我们假设htmlContent是可信的，但在实际应用中，如果htmlContent来自用户输入或其他不可信的源，就必须对内容进行适当的过滤和转义，以防止XSS攻击。

 Attribute

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

<div :id="dynamicId"></div>//简写

Mustache 语法使用JavaScript表达式

可以使用 JavaScript 表达式来进行更复杂的计算或条件判断：

<p>{{ a + b }}</p> <!-- 输出: 3 -->

<!-- 使用三元运算符 -->
<p>{{ a > b ? 'a 大于 b' : 'a 不大于 b' }}</p> <!-- 输出: 'a 不大于 b' -->

<!-- 调用方法 -->
<p>{{ sayHello() }}</p>

<!-- 在计算属性中使用表达式 -->
<p>{{ computedValue }}</p>

methods: {
  sayHello() {
    return 'Hello, Vue!';
  }
},
computed: {
  computedValue() {
    return this.a * 2; // 示例计算
  }
}

指令

v-if 显示与隐藏

v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

<div id="app">
    <h1 v-if='yes'>Yes!</h1>
    <h1 v-if='no'>No!</h1>
</div>

<script>
	export default {
         data(){
            return {
          	    yes:true,
                no:false,
            }
        }
    }
</script>

v-else-if 必须和 v-if 连用 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误

<div id="app">
    <h1 v-if='yes'>Yes!</h1>
    <h1 v-else>No!</h1>
</div>

v-bind 动态绑定

及时对页面的数据进行更改。

<!-- 完整语法 -->
<a v-bind:href="url"></a>


<!-- 缩写 -->
<a :href="url"></a>

	data() {
 		   return {url:'路径'}
  	   }

v-model 多用于表单元素实现双向数据绑定

    <input v-model="name" /> 
     // name 需要再data中定义,需要接收v-model传递过来的参数
     
   		data() {
 		   return {name:''}
  	   }

v-for 动态渲染

list 数组数据
    <ul>
       <li v-for="item in list" :key="item.id" v-html="item.name" />
    </ul>

data() {
    return {
      list: [
        {id: 1,name: '小明'},
        {id: 2,name: '小红'},
        {id: 3,name: '小绿'},
      ]
    }
   }

v-for里的:key

:key 的值应该是唯一的，通常使用数组元素的某个唯一属性（如 ID）作为值。当 Vue 检测到列表的变化时，它会使用 :key 来最小化 DOM 的更新操作，从而提高渲染性能。

v-show 显示内容

	 <div v-show="bool">我就是一个盒子</div>
     <div v-show="!bool">我就是两个盒子</div>
  		
  	 data() {
   		 return {
      		bool: true  // v-show 只会接收 布尔值(boolean)
   	   }
  }

v-on:click 给标签绑定函数

<div class="app">
    <!--正常写法-->
    <button v-on:click="myclick">click me</button>
    <!--简写-->
    <button @click="myclick">click me</button>
</div>  

<script>
 methods: {
    myclick() {
      console.log('你点我了一下')
    }
  }
</script>

v-text和v-html、{{}} 解析文本

	<div id="app">
    <!--  
		注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
		一般属性中不加 {{}}  直接写 对应 的数据名 
	-->
    <p v-text="msg"></p>
    <p v-text="html"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {{msg}}
    </p>
</div>
 
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js',
            html: "<span>html标签在渲染的时候被解析</span>"
        }
    });
 
</script>

Vue修饰符

修饰符极大地增强了Vue的灵活性和可用性

表单修饰符

• .lazy：在默认情况下，v-model 在 input 事件中同步输入框的值与数据，但使用 .lazy 修饰符后，会在 change 事件中同步，即用户完成输入并离开输入框时才更新数据。

使用场景：当输入框的每一次变化都会触发一些计算或验证逻辑，而这些逻辑又比较耗时或复杂时，使用 .lazy 修饰符可以减少这些逻辑被触发的频率，从而提高应用的性能。

<template>
  <div>
    <input type="text" v-model.lazy="inputValue" placeholder="请输入内容">
    <p>输入内容是：{{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>
//在上面的示例中，只有当用户完成输入并离开输入框时，inputValue 的值才会更新，并显示在页面上。

• .trim：自动过滤用户输入的首尾空格，中间的空格不会过滤。

<input type="text" v-model.trim="value">

• .number：自动将用户的输入值转为数值类型，如果无法被 parseFloat 解析，则返回原始字符串。

<input v-model.number="age" type="number">

事件修饰符

• .stop：阻止事件冒泡，相当于调用了 event.stopPropagation() 方法。

<div @click="shout(2)">
    <button @click.stop="shout(1)">ok</button> 
</div> 
//只输出1

• .prevent：阻止事件的默认行为，相当于调用了 event.preventDefault() 方法（如果事件可取消，则取消该事件，而不停止事件的进一步传播）。

<form @submit.prevent="onSubmit"></form>

• .self：只当事件是从事件绑定的元素本身触发时才触发处理函数。

<div v-on:click.self="doThat">...</div>

• .once：事件只触发一次。

<button @click.once="shout(1)">ok</button>

• .capture：使事件触发从包含这个元素的顶层开始往下触发。

<div @click.capture="shout(1)">
    obj1
<div @click.capture="shout(2)">
    obj2
<div @click="shout(3)">
    obj3
<div @click="shout(4)">
    obj4
</div>
</div>
</div>
</div>
// 输出结构: 1 2 4 3 

• .passive：在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

• .native：让组件变成像HTML内置标签那样，可以监听元素的原生事件。

鼠标按键修饰符

• .left：左键点击。
• .right：右键点击。
• .middle：中键点击。

<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

 键值修饰符

键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，有如下：

keyCode存在很多，但vue为我们提供了别名，分为以下两种：

• 普通键（enter、tab、delete、space、esc、up...）
• 系统修饰键（ctrl、alt、meta、shift...）

// 只有按键为keyCode的时候才触发 
<input type="text" @keyup.keyCode="shout()">

v-bind修饰符

• async 修饰符是一种语法糖，用于简化父子组件之间通过自定义事件更新props值的流程。

没有使用.sync修饰符的父组件

<child-component :myMessage="message" @update:myMessage="handleMessageUpdate"></child-component>

使用.sync修饰符时的父组件

<comp :myMessage.sync="bar"></comp>

子组件没有变化

<template>
  <button @click="updateMessage">Update Message</button>
</template>

<script>
export default {
  props: ['myMessage'],
  methods: {
    updateMessage() {
      // 假设我们有一个新的消息值
      const newMessage = 'Hello from child';
      // 触发update:myMessage事件，通知父组件更新myMessage prop
      this.$emit('update:myMessage', newMessage);
    }
  }
}
</script>

• prop-设置自定义标签属性，避免暴露数据，防止污染HTML结构

<input id="uid" title="title1" value="1" :index.prop="index">

• camel

将命名变为驼峰命名法，如将 view-Box属性名转换为 viewBox

<svg :viewBox="viewBox"></svg>