首页 技术 正文
技术 2022年11月15日
0 收藏 643 点赞 4,446 浏览 1566 个字

  其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅。所谓勤能补拙。

  首先我们说一下模板,其实如果看过第一节vue入门—-组件,我们会知道更好更科学的办法是通过创建组件的方式,这种方式允许我们任意进行组件的嵌套。而通过模板的方式的话,个人觉得效果并没有组件好。行,开始切入正题,现在我们首先通过一下几点来进行学习(其实是按照官网的顺序记录自己不懂的知识点)。

  1.  插值: 所谓插值,其实就是数据的绑定,我们可以通过脚本语言来修改Vue作用域内的任意值。大致分为一下几点内容:

     A.  文本:其实这是最简单的方法之一,我们可以简单的通过Mustache来进行相关的设置。语法如下:{{example}}

     B.  单次文本绑定: 同上,只是值不会随js的改变而改变,语法如下:{{*example}}

     C.  html: 如果我们想通过插值的方式来将html进行元素替换的话,我们可以使用v-html指令来进行关联,注意与vue1.0中的差别,在1.0中直接通过{{{……}}}即可完成绑定。但是在这我更推荐使用自定义组件的方式进行扩展,因为采用v-html指令的方式来复合局部模板,vue并不能识别我们在其中嵌套的模板。

       D.  js表达式:我们还可以在绑定中进行js表达式的编写,这样我们可以进行一些简单的判断,但是有一个限制: 每个绑定只能包含一个表达式。(不包括语句和流程控制等)

  2.  计算属性: 计算属性是我们学习过程中的另一个知识点,它的函数是指:如果我们想要通过作用域范围内的值进行计算得出另一个值,如果我们直接在插值中进行计算会显得特别凌乱和难以维护。这时候我们就需要使用计算属性,语法为:computer:{},可使用与vue的实例过程中,或者是组件的创建过程中(上一节我们说过,vue实例过程中的参数出el和data外,其余的都可以使用到组件创建过程中)。例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{test}}</h1>
<h2>{{tset}}</h2>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
test: 'temp'
},
computed: {
tset: function () {
return this.test+'pmet'
}
}
})
</script>
</body>
</html>

  这里test是经过简单绑定的模板,而tset则是经过test计算出来的属性,我们通过computed:{}语法进行计算。特别注意这里this的用法,this调用的是vm作用域内的全体成员。

  A.  这里我们需要特别注意一点,计算属性只有在其依赖的值发生改变的时候才会出发进行再次计算,相当于一个缓存的作用。这样设计的好处是如果我们维护了一个很大的变量时,并且另一个计算属性依赖于这个变量,此时我们不可能每一次都去读取这个变量,更科学的办法是当被依赖属性发生改变时出发事件。这种科学的做法类似cache的设计理念。

  B.  实时更新,我们在进行设计的时候如果希望每一次更新都去读取被依赖属性,那么我们可以使用methods属性。

  C.  并且在进行computed的时候我们还可以对计算属性设置set/get方法。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,954
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,479
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,291
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,108
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,740
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,774