TypechoJoeTheme

徐伟轩 - 一个爱音乐的有趣程序员|不仅只关注网站设计开发

统计

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

徐伟轩博主
2020-10-05
/
0 评论
/
123 阅读
/
457 个字
/
百度已收录
10/05

上一节我们了解了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>
列表渲染

  • 序号:{{ index }},姓名:{{ val.name }},性别:{{ val.sex }},年龄:{{ val.age }},定位:{{ val.age > 30 ? '大龄' : '小年轻' }}

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:"女"},
      ]
  }

});

vue
朗读
赞(0)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

徐伟轩 - 一个爱音乐的有趣程序员|不仅只关注网站设计开发

本文链接:

https://www.letus.top/archives/38.html(转载时请注明本文出处及文章链接)

如需商业转载或刊登,请联系原作者获得授权。

署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)

评论 (0)

亲爱的朋友

一切伟大,源于勇敢的开始。

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

标签云