文档章节

Vue.js基础(一)

SingularD
 SingularD
发布于 2017/08/09 00:54
字数 1026
阅读 6
收藏 0

上一篇介绍了vue的安装,这一篇总结一下Vue的基础部分:

一、实例(这一篇我可能会用到单页面的Vue(总结效率高一点)):

每一个vue.js都是通过构造函数vue创建一个根实例来实现:

var vm = new Vue({
  // 选项
})

在选项之中可以填入你要实现的东西。

每一个vue都会代理data对象里所有的属性:

var data = {a:1}
var vm = new Vue({
  data: data
})
vm.a === data.a //true
vm.a === 2
//data.a === 2,以此类推
data.a === 3
//vm.a ===3,反之亦然

二、几个重要的语法:“v-if”,“v-bind”,“v-on”,“v-html”,“v-text”,“v-show”等等:

1、v-if:

以我的理解v-if和v-show实现的效果差不多:相当于css里面display:none属性,用于隐藏元素,具体有什么区别呢?官方文档是这样描述的:

v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下, v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

效果对比:

<template>
  <div class="test">
    <div id="if" v-if="true">我是v-if</div>
    <div id="show" v-show="true">我是v-show</div>
  </div>
</template>
<style>
#if{
  width: 100px;
  height: 100px;
  background-color: aqua;
}
#show{
  width: 100px;
  height: 100px;
  background-color: chartreuse
}
</style>
<script>
export default {
  name: 'test'
}
</script>

接下来我会改变v-if和v-show的值再来对比效果:

两个值都为false的时候,都不在了;

v-if为true,v-show为false的时候:页面中只存在v-if,反之亦然;

结论:效果差不多,但是要频繁切换的时候按照官方文档说的尽量用v-show;

v-for:

v-for是用来对列表进行渲染可以减少代码的重复:

<template>
  <ul class="test">
    <li v-for="item in form">
      {{item.message}}
    </li>
  </ul>
</template>
<style>

</style>
<script>
export default {
  name: 'test',
  data () {
    return {
      form: [
        {message: 'apple'},
        {message: 'apple'},
        {message: 'apple'},
        {message: 'apple'},
        {message: 'banana'}
      ]
    }
  }
}
</script>

这样我就写出了一个列表:

v-on:利用v-on来监听DOM事件触发js代码:

<template>
  <div class="test">
    <button v-on:click="increase">+</button>
    <button @click="decrease">-</button>
    <p>{{counter}}</p>
  </div>
</template>
<style>

</style>
<script>
export default {
  name: 'test',
  data () {
    return {
      counter: 0
    }
  },
  methods: {
    increase: function () {
      this.counter += 1
    },
    decrease () {
      this.counter -= 1
    }
  }
}
</script>

以上代码中:@是v-on的简写,在methods中:increase: function () {}也可以简写为increase () {},效果如下:

这样就可通过“+”和“-”按钮改变下面数字的值;

v-bind:我们可以通过v-bind来实现双向绑定,当你改变表单空间上的值得时候与之绑定的页面元素的值也会发生改变:

<template>
  <div class="test">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
  </div>
</template>
<style>

</style>
<script>
export default {
  name: 'test',
  data () {
    return {
      message: 'sada'
    }
  }
}
</script>

效果如下:

当改变输入框里面的值的时候,Message is:后面的也会马上发生改变;

v-text与v-html:我直接拉出代码,一看就知道区别了:

<template>
  <div class="test">
    <p v-html="message"></p>
    <p v-text="message"></p>
  </div>
</template>
<style>

</style>
<script>
export default {
  name: 'test',
  data () {
    return {
      message: '<h1>这是一个标题</h1>'
    }
  }
}
</script>

效果如下:

由此可见v-html会将代码“翻译”后展现在页面上,而v-text相反,它是直接将你输入的内容全部反映出来。

v-bind:我个人认为v-bind用于动态绑定class的值,以及style样式:

<template>
  <div v-bind:class="{test:isTest}">
    我是被v-bind绑定的元素
  </div>
</template>
<style>
.test{
  width: 100px;
  height: 100px;
  background-color: chartreuse;
  margin: 0 auto;
}
</style>
<script>
export default {
  name: 'test',
  data () {
    return {
      isTest: true
    }
  }
}
</script>

效果如下:,如果我们将isTest的值改为false的话那么这个div的类名就不叫test,从而css也对它没得作用,不会有背景颜色等等样式了。当然了v-bind还可以绑定很多的类名,是时间情况而定。

© 著作权归作者所有

下一篇: Vue.js学习进程
SingularD
粉丝 2
博文 17
码字总数 6512
作品 0
成都
程序员
私信 提问
2019 前端面试 | Vue.js 专题

前端一万小时” 所有,欢迎转载! 转载请注明出处,未经同意,不可修改文章内容。复制代码 🚀本文为“语雀”私有库「前端一万小时」现有文章目录及对应面试题索引, 含未公开发布和写作中的...

itsOli
06/15
0
0
【Vue 牛刀小试】:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

系列目录地址 一、基础知识概览 第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的使用(posted at 2018-11-02) ...

墨墨墨墨小宇
07/03
0
0
前端用户权限控制解决方案Vue-Access-Control宣布开源

Vue-Access-Control宣布开源。 随着前后端分离架构的流行,权限控制这个曾经陌生的话题开始进入很多前端同学的视野,作为一名前端,可能部分同学会认为权限是后端的事,其实这个想法是片面的...

特欧威尔
2017/12/01
10
0
使用webpack打包编写一个vue插件

一、说明: 需求:创建一个toast插件 思路:利用vue组件创建模板,使用webpack打包生成插件再全局使用。 二、开发一个vue-toast插件 借助npm平台发布一个vue插件 流程: 声明插件——写插件—...

爱敲代码的程序员
2017/11/01
1K
0
Vue-CLI and Leaflet (5): 点 绘制

(一) Vue-CLI and Leaflet:起步 - 在 Vue-CLI 中使用 Leaflet (二) Vue-CLI and Leaflet:地图基本操作(放大,缩小,平移,定位等) (三) Vue-CLI and Leaflet: 添加 marker, polyli...

蓝波丶坎迪
06/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

cleanLastUpdated.bat

@echo offrem create by AnXiaole rem 这里写你的仓库路径set REPOSITORY_PATH=C:\Users\AnXiaole\.m2\repositoryrem 正在搜索...for /f "delims=" %%i in ('dir /b /s "%REPO......

安小乐
9分钟前
1
0
操作放大器的用法是什么?

  有区别   1、单级放大的倍数比较有限,一般在100倍以下。放大倍数很大的话,负反馈就比较浅,对于放大倍数的稳定性不利。假如需要放大倍数更高,就不得不动用多级放大电路了。单级放大...

仙溪
11分钟前
2
0
c++ 上传文件 curl

bool uploadFile(std::string url, std::string file, std::string auth) { boost::filesystem::path p(file); CURL *curl; CURLcode res; struct curl_httppost *for......

青黑
17分钟前
2
0
冒泡与插入排序的代码实现

// 冒泡排序,a 表示数组,n 表示数组大小public void bubbleSort(int[] a, int n) { if (n <= 1) return; for (int i = 0; i < n; ++i) { // 提前退出冒泡循环的标志位 ...

无名氏的程序员
20分钟前
3
0
centos7.6 +mhvtl1.6安装

以前的mhvtl都是在centos6.x,5.x上安装的mhvtl以前版本为1.4,现在最新的1.6出来,可以安装在centos7.6上,下面是安装过程: 1.安装基础包 centos7.6只要能上外网,默认是配置了yun源的,这些...

突突突酱
21分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部