vue 学习 渲染、v-指令

vue渲染

在组件中data是一个方法里面的值要是一个对象return出去

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "vue 学习旅程"
    };
  }
};

如果是new的事例 data就是一个对象

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

组件例子:

1.使用  {{}}  文本插值符

f1 <template>
   <div class="hello">
     <div>{{msg}}</div>
   </div>
 </template>

 <script>
 export default {
   name: "HelloWorld",
   data() {
     return {
       msg: "vue 学习旅程"
     };
   }
 };
 </script>

效果:

// v-text v-html 区别

<template>
  <div class="hello">
    <span v-text="word1">11</span>
    <span v-html="word2">11</span>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      word1: " <div>安稳1</div> ",
      word2: "<div>安稳2</div>  "
    };
  }
};
</script>

效果:
总结: v-html解析html 两个都会覆盖标签内容  {{}}不会覆盖 {{}}和v-text都不解析html内容

vue指令

2.v-bind

改指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。 v-bind可以简写 :

<template>
  <div class="hello">
    <span v-bind:title="msg">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "vue 学习旅程"
    };
  }
};
</script>

鼠标悬浮效果:

3.v-if 指令

绑定一个布尔值   true是显示  false隐藏

<template>
  <div class="hello">
    <span v-if="active">{{msg}}</span>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "vue 学习旅程",
      active: true
    };
  }
};
</script>

4.v-for

注意点:

1.需要加key值 -通过key值来提升渲染的效率默认用 “就地复用” 策略

2.v-for

 v-for="(item,index) in items"     第一参数item是每一项的数组元素  第二参数index是当前项的索引    (和angularjs 相反 )
也可以用of代替in作为分隔符,也是最接近javascript迭代器的语法。 这时候每一项的意义有一些不一样 
　v-for="(item,key,index) of items"    第一参数item元素 第二参数key为键名  第三个参数index 为索引

<template>
  <div class="hello">
　　　<span v-for="(item,index) in msg" :key="index">{{item.a}}</span>
 　　// <span v-for="item in msg">{{item.a}}</span> 注意这种写法不会影响效果，但是编辑器语法会报错出现红色波浪线 记得加上key值
　</div>
</template>

 <script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: [{ a: 1 }, { a: 2 }, { a: 3 }]
    };
  }
};
</script>

效果:

5.v-on

事件绑定可以cy()也可以cy直接绑定   加括号传参数 v-on可以简写@

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

以上我们直接写死的点击事件 也可以使用动态参数作为事件名绑定处理函数

<div id="app-5">
  <button v-on:[eventname]="reverseMessage">动态事件名</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
　　eventname:'focus'
　　},

  methods: {
    reverseMessage: function () {
　　　　。。。。。。  
　　  }
  }
})
当 值为'focus' v-on:[enentname]等价 v-on:focus

包括(v-bind  和 v-on 的动态参数 )
动态事件参数注意点:
1.非字符串类型都会触发警告
2.语法约束空格引号无效并且回避大小写
3.计算属性复杂的表达式也会无效
例:
<a v-bind:['foo' + bar]="value"> ... </a>  //触发警告
<a v-bind:[someAttr]="value"> ... </a>　　//流浪器特效强制转小写

这个是官网的事例:我看到了一个reverse()的方法 以前没用过所以做一下记录~

var vm = new Vue({
date:{
     message="abcdefg"
    }
)}
//split(' ')分裂，也就是把一个数据拆分   
message.split(' ') == [ "a", "b", "c", "d", "e", "f", "g"]
//reverse( )翻转，把数据反过来  !只对数组有效
message.split(' ').reverse() == ['g', "f", "e".......]
//join(' ')重组，把数组合成一个字符串
//把数据反过来重组
message.split(' ').reverse( ).join(' ')

6.v-model

<template>
  <div class="hello">
    <input type="text" v-model="msg" />
    <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "vue 双向绑定"
    };
  }
};
</script>

v-model的修饰符,一起记录一下

(1) .lazy 会转变为在 change 事件中同步 ， 也就是在失去焦点 或者 按下回车键时才更新**

　　<input type="text" v-model.lazy="msg" />

 

 (2) .trim  去头尾空格

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

 

 (3).number 将输入的值转化为Number类型 ，否则虽然你输入的是数字 但它的类型其实是String，在数字输入框中比较有用

　　<input type="number" v-model.number="msg" />