vue学习之路(二)了解vue常用知识点

搞开发 0 赞 (0) 457字  预计2分钟 60

上一节我们了解了vue学习之路(一)环境的搭建,今天我们带大家了解vue常用知识点。
vue学习之路(二)了解vue常用知识点

创建第一个vue应用

引入vue
之后所有示例都默认引入vue.js,推荐去https://www.bootcdn.cn/查找引入vue.

<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>

html

<div id="app">
  <span>message: {{ message }}</span>
</div>

javascript

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

模板语法

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

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

一次性绑定

<span v-once>一次性赋值,当数据改变时这里不会改变{{ message }}</span>

原始的html

<div v-html="htmlData"></div>

绑定属性

<button v-bind:disabled="status">按钮</button>

此时按钮的disabled属性就被status数据控制,另外还有简易写法(:属性名):

<button :disabled="status">按钮</button>

javascript表达式

<span>{{ status == 'online' ? '在线' : '离线'  }}</span>

只能写单个表达式,流程控制和语句等不能执行!

绑定事件

<div id="app">
  <div v-on:click="sayHello()">点我啊</div>
</div>
var app = new Vue({
  el:'#app',
  data:{},
  method:{
      sayHello:function(){
          alert('hello vue');
      }
  }
})

同样v-on也有缩写

<div @click="sayHello()">点我啊</div>

侦听器和计算属性

侦听器
侦听器是一个监听数据变化的vue属性,举例如下

<div id="app">{{ message }}</div>
  var app = new Vue({
      el:'#app',
      data:{
          message:"this is a watch word"
      },
      watch: {
          message:function(newVal, oldVal){
              console.log('message old value is :'+oldVal);
              console.log('message now value is :'+newVal);
          }
      }
  });

当我们在控制台手动变更message的值的时候,watch会监听到message的变更,并且执行对应回调函数,参数为变更后的值,和变更前的值
侦听器变更前的值

计算属性
虽然在双大括号中可以对数据运用一些表达式,但是在模板中放入太多的逻辑会让模板过重且难以维护,计算属性就是解决这一问题的

<div id="app">
{{ message }}

{{ message1 }}
</div>
var app = new Vue({

  el:'#app',
  data:{
      message:"hello vue"
  },
  computed: {
      message1 :function(){
          return 'woann ' + this.message
      }
  }

});
message1的结果就是由计算属性返回的,并且计算属性对应函数中包含的属性只要发生变化,那么计算属性也发生变化

条件渲染、列表渲染、class与style绑定
条件渲染
<div v-if="age < 25">
你才{{ age }}岁,你还年轻
</div>
<div v-else-if="age == 25">
今年竟然 {{ age }}岁了
</div>
<div v-else>
你都 {{ age }}岁了,大叔
</div>
<template v-if="status == 1">
<p>显示</p>
</template>
<template v-else>
<p>隐藏</p>
</template>
列表渲染

var app = new Vue({

  el:'#app',
  data:{
      list: [
          {name:"woann",age:25,sex:"男"},
          {name:"john",age:29,sex:"男"},
          {name:"jack ma",age:50,sex:"男"},
          {name:"dongmingzhu",age:50,sex:"女"},
      ]
  }

});

如果您喜欢这篇文章,欢迎在下方留言评论哦~
发表您的看法
选择表情