欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue:基础整理(一)

程序员文章站 2024-02-19 13:58:30
...

一.vue的基本代码

<div id="app">
    <p>{{ msg }}</p>
  </div>

desc:id为app的元素区域的所有内容,是将来new的vue实例所要控制的

<script>
var vm = new Vue({
	el:'app',
	data:{
		msg:'HelloWorld'
	}
})
</script>

desc:
1.new出来的这个vm对象,就是mvvm中vm的调度者

vue:基础整理(一)

2.data:{ }就是mvvm中的M,用来保存每个页面的数据
3.message:‘HelloWorld’:通过vue指令 v-bind 属性绑定渲染到页面,不需要再手动操作dom

二.v-指令

1.v-cloak:解决插值表达式闪烁的问题

<p>{{msg}}</p>
<p v-cloak>{{ msg }}</p>

2.v-text:用于渲染普通文本,会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空。

<div>===={{msg}}===</div>
<div v-text="msg"></div>

3.v-html

<div v-html="msg_html"></div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			msg_html:'<h1>HelloWorld</h1>'
		}
	})
</script>

4.v-bind: Vue提供的属性绑定机制 缩写是 :

<input type="button" value="按钮" v-bind:title="mytitle + '123'">

5.v-on:Vue提供的事件绑定机制 缩写是 @

<input type="button" value="按钮" :title='myTitle' v-on:click="alert('hello')">
<input type="button" value="按钮" @click="show">

三.事件修饰符

  1. .stop 阻止冒泡事件
  2. prevent 阻止默认行为 如标签的跳转;表单的提交submit事件
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a>
  1. .capture 实现捕获触发事件的机制;组件嵌套从外到里执行
<div @click.capture = "handlerDiv">
	<input type="button" value="戳" @click = "handlerInput">
	</input>
</div>
点击“戳”按钮时,先执行handlerDiv的方法,再执行handlerInput的方法
  1. .self 实现只有点击当前元素时候,才会触发事件处理函数
<div class="inner" @click.self="divHandler">
      <input type="button" value="戳" @click="btnHandler">
</div>
点击“戳”按钮,只会走btnHandlere方法(即阻止冒泡),只有当点击div的时候才会触发divHandler方法
  1. .once 只触发一次事件处理函数
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a>
只阻止一次linkClick行为 第二次会跳转到百度首页

四.v-model指令:实现表单元素和Model中数据的双向绑定

注意:v-model 只能运用在 表单元素中 常见的有

<input type="text">
<input type="password"> 
<input type="radio">
<input type="checkbox">
<input type="button" value="确认" />
<input type="submit" value="提交" />

等等… 因为其他元素的值没法在页面修改,也就不能实现V中数据传给M,只能M传给V

<input type="text" style="width:100%;" v-model="msg">
 <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'zzzz'
      },
      methods: {
      }
    });
  </script>

五.v-for

1.循环普通数组

 <p v-for="(item, i) in list">索引值:{{i}} --- 每一项:{{item}}</p>
	 data: {
        list: [1, 2, 3, 4, 5, 6]
      },

2.循环对象数组

<p v-for="(user, i) in list">Id:{{ user.id }},名字:{{ user.name }},索引:{{i}}</p>
 data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },

3.循环对象

<!-- 注意:在遍历对象身上的键值对的时候, 除了 有  val  key  ,在第三个位置还有 一个 索引  -->
<p v-for="(val, key, i) in user">值是: {{ val }} ,键是: {{key}} ,索引: {{i}}</p>
 data: {
    user: {
      id: 1,
      name: 'xxx',
      gender: '男'
   }
},

4.循环数字

<!-- 注意:如果使用 v-for 迭代数字的话,前面的 count 值从 1 开始 -->
    <p v-for="count in 10">这是第 {{ count }} 次循环</p>

5.key属性的使用

<!-- 注意: v-for 循环的时候,key 属性只能使用 number获取string -->
    <!-- 注意: key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值 -->
    <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>
     data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: 'A' },
          { id: 2, name: 'B' },
          { id: 3, name: 'C' },
          { id: 4, name: 'D' },
          { id: 5, name: 'E' }
        ]
      },

六.v-if,v-show的使用

    <input type="button" value="toggle" @click="flag=!flag">

    <!-- v-if 的特点:每次都会重新删除或创建元素 -->
    <!-- v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式 -->

    <!-- v-if 有较高的切换性能消耗 -->
    <!-- v-show 有较高的初始渲染消耗 -->

    <!-- 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show -->
    <!-- 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if -->
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>

总体结构:
1.vue的基本代码
2.vue指令
3.事件修饰符( .stop .prevent .capture .self .once)
4.v-model
5.v-for
6.v-if与v-show

相关标签: web前端 vue js