vue:基础整理（一）

一.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提供的事件绑定机制缩写是 @

扫描二维码关注公众号，回复： 11264521 查看本文章

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

三.事件修饰符

.stop 阻止冒泡事件

prevent 阻止默认行为如标签的跳转；表单的提交submit事件

<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

.capture 实现捕获触发事件的机制；组件嵌套从外到里执行

<div @click.capture = "handlerDiv">
	<input type="button" value="戳" @click = "handlerInput">
	</input>
</div>

点击“戳”按钮时，先执行handlerDiv的方法，再执行handlerInput的方法

.self 实现只有点击当前元素时候，才会触发事件处理函数

<div class="inner" @click.self="divHandler">
      <input type="button" value="戳" @click="btnHandler">
</div>

点击“戳”按钮，只会走btnHandlere方法(即阻止冒泡)，只有当点击div的时候才会触发divHandler方法

.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>

七.vue中$el属性：

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

var vm= new Vue({    
        el:"#container",    
        data:{    
                msg:"重启2020!"    
        },    
        address:"all over the world"    
})

vm.$el：vue关联的DOM元素 --> #container

vm.$data：vue实例的data对象 -->{msg:“重启2020!”}

vm. $options:获取vue实例的自定义属性-->vm.$ options.address–>“all over the world”

（vm.$options.methods ==> 获取vue实例的自定义属性methods）

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

vue:基础整理（一）

猜你喜欢