Vue基础二（下）

最新推荐文章于 2021-07-12 13:43:32 发布

cfr1994

最新推荐文章于 2021-07-12 13:43:32 发布

阅读量148

点赞数

分类专栏： Vue 前端框架文章标签： Vue 指令

本文链接：https://blog.csdn.net/cfr1994/article/details/102628171

版权

Vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端框架

9 篇文章 0 订阅

订阅专栏

Vue基础二（下）

指令

指令的目的：操作DOM
解释：MVVM vm -> v 数据驱动
不直接操作DOM，而是操作数据，数据要想操控DOM，需要指令，因为指令是直接绑定在DOM身上的

1. v-html
	- 转义输出，也就是可以解析 xml 数据
2. v-text
	- 非转义输出，也就是无法解析 xml 类型数据
3. 条件渲染
	- v-if
	- v-else-if
	- v-else
	- v-show 条件展示

<body>
  <div id="app">
    <h3> {{}} </h3>
      <p> {{ info }} </p>
      <p> {{ xml }} </p>
    <h3> v-html </h3>
      <p v-html = "xml"></p>
      <p v-html = "info"></p>
    <h3> v-text </h3>
      <p v-text = "info"></p>
      <p v-text = "xml"></p>
<!-- 条件渲染 -->
    <h3> v-show </h3>
      <p v-show = "f"> A </p> 
    <h3> v-if - 单路分支  </h3>
      <p v-if = "f"> A </p>
    <h3> v-if - 双路分支 </h3>
      <p v-if = "f"> A </p>
      <p v-else> B </p>
    <h3> v-if - 多路分支 </h3>
      <input type="text" v-model = "type">
      <p v-if = " type == 'A' "> A </p>
      <p v-else-if = " type == 'B' "> B </p>
      <p v-else> C </p>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      info: 'NBA事件',
      xml: '<font style = "color: red;"> xml数据 <font>',
      f: true,
      type: 'A'
    }
  })
</script>

4. v-bind
	- 将数据和属性进行单向数据绑定： 将vue中数据赋值给属性值

    .size{
      width: 100px;
      height: 100px;
      background: #ccc;
    }
    .red{
      background: red;
    }
    .blue{
      background: blue;
    }
    .font{
      font-size: 20px;
    }

<body>
  <div id="app">
    <img v-bind:src="img" alt="">
    <img :src="img" alt="">
    <h3> 类名的绑定 - 对象形式 </h3>
      <p :class = "{size: true,red: redFlag,blue: blueFlag}"></p>
      <p class = "font" :class = "{size: true,red: redFlag,blue: blueFlag}"> Vue </p>
      <p :class = "{ red: true,size: true }"></p>
      <p :class = "{ blue: true,size: false }"></p>
      <p :class = "{ [class1]: true,[class3]: true }"></p>
    <h3> 类名的绑定 - 数组形式 </h3>
      <p :class = "['size','red']"></p>
      <p :class = "[class1,class3]"></p>
      <p :class = "[ class1,class3,5>3?'a':'b']">  </p>

    <h3> 样式的绑定 - 对象形式 </h3>
      <p :style = "{
        width: '100px',
        height: '100px',
        background: 'yellow'
      }"></p>
      <p :style = "styleObj1"></p>
    <h3> 样式的绑定 - 数组形式 </h3>
      <p :style = "[{
        width: '200px',
        height: '200px'
      },{
        background: 'purple'
      }]"></p>
      <p :style = 'styleObj2'></p>


      <a :href=" url "> 百度 </a>
    </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  /* 
    img  src 
    dom  class
    dom  style
    解决以上的问题，我们使用v-bind
    格式： v-bind:attr = 数据

    简写形式
        格式:   :attr = 数据
  */
  new Vue({
    el: '#app',
    data: {
      url: 'https://www.baidu.com',
      styleObj1: {
        width: '100px',
        height: '100px',
        background: 'pink'
      },
      styleObj2: [{
        width: '200px',
        height: '200px'
      },{
        background: 'green'
      }],
      class1: 'size',
      class2: 'red',
      class3: 'blue',
      redFlag: true,
      blueFlag: false,
      img: ''
    }
  })
</script>

总结：

- v-if 和 v-show 的区别
	- 效果看起来一样
	- v-if控制的是元素的存在与否；v-show控制的是元素的display:none属性
- 如果初始条件为假时，v-if   v-show 谁的性能损耗较高？
	- v-show，因为 v-if 为false时不需要创建标签；而 v-show 为false时是在标签上添加display:none样式，需要标签创建
- 项目中：
	- 频繁切换用：v-show
	- 如果不是很频繁的切换用：v-if

5. 列表渲染
	- v-for

	<body>
	  <div id="app">
	    <h3> 数组 </h3>
	    <ul>
	      <li v-for = "(item,index) of arr" :key = "index">
	        {{ item }} -- {{ index }}
	      </li>
	    </ul>
	
	    <h3> 循环number / string  </h3>
	    <ul>
	      <li v-for = " item in 10 "> {{ item }} </li>
	      <li v-for = " item in 'abc' "> {{ item }} </li>
	    </ul>
	
	    <h3> 对象 </h3>
	    <ul>
	      <li v-for = "(item,key,index ) in obj" :key = "item.card">
	        <p> item -- {{ item }} --  key -- {{ key }} -- index -- {{ index }}</p>
	      </li>
	    </ul>
	
		<h3> 循环嵌套 </h3>
	    <ul>
	      <li v-for = 'item in json' :key = "item.id">
	        <h3> {{ item.type }} </h3>
	        <ul>
	          <li v-for = "brand in item.brands" :key = 'brand.id'>
	          <!-- <li v-for = "ele in item.brands" :key = "ele.id"> -->
	          <!-- <li v-for = "item in item.brands" :key = "item.id"> -->
	            <p> {{ brand.type }} </p>
	          </li>
	        </ul>
	      </li>
	    </ul>
	  </div>
	</body>
	<script src="../../lib/vue.js"></script>
	<script>
	  new Vue({
	    el: '#app',
	    data: {
	      arr: [1,2,3,4],
	      obj: {
	        card: 1,
	        name: 'Vue',
	        age: 25,
	        sex: 'man'
	      },
	      json: [
	        {
	          id: 1,
	          type: '笔记本',
	          brands: [
	            {
	              id: 1,
	              type: '苹果'
	            },
	            {
	              id: 2,
	              type: '戴尔'
	            },
	            {
	              id: 3,
	              type: '联想'
	            },
	            {
	              id: 4,
	              type: 'Acer'
	            }
	          ]
	        },
	        {
	          id: 2,
	          type: '手机',
	          brands: [
	            {
	              id: 1,
	              type: '华为'
	            },
	            {
	              id: 2,
	              type: '小米'
	            },
	            {
	              id: 3,
	              type: '黑莓'
	            },
	            {
	              id: 4,
	              type: 'vivo'
	            }
	          ]
	        }
	      ]
	    }
	  })
	</script>

总结

- 列表渲染参数可以写三个，分别为 item key index
- 列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识
	- 这个key最好是id,因为id唯一，而不能是index（思考？为什么）
- 循环嵌套式，参数名称是可以一致的
- in / of 都可以使用

key：
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误
最常见的用例是结合 v-for

6. 表单控件绑定
	- v-model
		- 双向数据绑定
			- VM 改变，V随之改变
			- V改变，VM也随之改变

	<body>
	  <div id="app">
	    <h3> v-model </h3>
	    <input type="text" v-model = "money">
	    <hr>
	    <h3> v-bind </h3>
	      <input type="text" :value = "money" v-on:input = "changeMoney">
	      <p> {{ money }} </p>
	  </div>
	</body>
	<script src="../../lib/vue.js"></script>
	<script>
	  /* 
	    * 单向数据绑定  v-bind
	    * 双向数据绑定  v-model
	    * 
	      *  v-model 只能用于表单元素，它默认绑定了value
	      * 经验：一看到表单元素就直接给它v-model 
	    * v-bind模拟v-model?
	      *  添加事件   
	        *  <div onclick = "load()"></div>
	        *  <div v-on:click = "load()"></div>
	  */
	  new Vue({
	    el: '#app',
	    data: {
	      money: 1000
	    },
	    methods: {
	      // methods里面放的都是事件处理程序
	      changeMoney ( e ) {
	        //修改money
	        this.money = e.target.value 
	      }
	    },
	  })
	</script>

key的重要性：给列表渲染的每一层Vdom添加一个唯一标识，以便diff算法进行同层级比较

oninput 事件在用户输入时触发，它是在元素值发生变化时立即触发；
该事件在 <input> 或 <textarea> 元素的值发生改变时触发

7. 事件处理器
	- v-on

	<body>
	  <div id="app">
	    <button v-on:click = "incremnt"> 点击 </button>
	    <button @click = "incremnt"> 点击 </button>
	    <p> {{ count }} </p>
	  </div>
	</body>
	<script src="../../lib/vue.js"></script>
	<script>
	  /* 
	    v-on 
	      一个完整的事件
	        事件源
	        事件类型
	        事件处理程序
	    为什么vue选择 v-on 来做
	      <button onclick = "function()"></button> -- 从此DOM操作转变过来
	
	    事件的使用流程
	      先写事件处理程序，在去绑定dom
	
	    事件处理程序我们都放在了methods选项中
	
	    v-on:click = "方法名称"  简写为  @click = "方法名称"
	
	    西阁： 我猜： @   action  动作
	  */
	  new Vue({
	    data: {
	      count: 0
	    },
	    el: '#app',
	    methods: {
	      incremnt () {
	        this.count ++
	      }
	    }
	  })
	</script>

8. v-pre
	- 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

<body>
  <div id="app">
    <p v-pre>
      {{ info }}
    </p>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      info: 'Hello Vue'
    }
  })
</script>

9. v-cloak
	-  这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

<style>
    [v-cloak] {
      display: none;
    }
  </style>
<body>
  <div id="app">
    <p v-cloak> {{ info }} </p>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      info: 'Hello Vue'
    }
  })
</script>

10. v-once
	- 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

<body>
  <div id="app">
    <input type="text" v-model = "num">
    <p v-once> {{ num }} </p>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      num: 0
    }
  })
</script>

cfr1994

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础二（下）

Vue基础二（下）指令指令的目的：操作DOM解释：MVVM vm -> v 数据驱动不直接操作DOM，而是操作数据，数据要想操控DOM，需要指令，因为指令是直接绑定在DOM身上的1. v-html - 转义输出，也就是可以解析 xml 数据2. v-text - 非转义输出，也就是无法解析 xml 类型数据3. 条件渲染 - v-if - v-else-...
复制链接

扫一扫

专栏目录