Vuejs - 花式渲染目标元素

Vue.js是什么

摘自官方文档:

Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

对比其他框架?

一般提到一个框架时,大家都喜欢跟其他框架作对比,以说服读者去使用它,但是这里就不做对比了,是不是很失望?每个人都有每个人的好,何况是由人创造出来的框架呢,单凭 vuejs 在github上8W+的star,那也值得你去尝试一回,不是吗?

当然如果你有框架选择恐惧症,那么不妨相信我一回,直接跟着我亲自上手体验吧~

起步

其实使用 Vuejs 很简单,直接像引入 jquery 方式一样,引入源码标签就行,如下:

12
<!-- 这里直接引入cdn源码,当然你也可把它下载下来,直接引入 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>

每个Vue应用都是通过 Vue 函数创建一个新的 Vue实例 开始的。

接下来,我们来创建一个最基本的应用,实现在页面中输出 Hello Vue.js!。新建一个html文件代码如下:

123456789101112131415161718
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>You Don‘t Know Vuejs - Chapter 1</title></head><body>  <div id="app"></div>  <!-- 这里直接引入cdn源码,当然你也可把它下载下来,直接引入 -->  <script src="https://cdn.jsdelivr.net/npm/vue"></script>  <script>    var app = new Vue({      el: "#app",      template: "<h1>Hello Vue.js!</h1>"    });  </script></body></html>

使用浏览器打开刚创建的 index.html ,页面会输出一个大大的 h1 标签,内容就是我们期待的 Hello Vue.js!,怎么样是不是很简单。Vue实例在创建的时候需要传入一个对象作为参数,这个对象有很多属性,包括: DOM渲染相关属性(el、template…),数据相关属性(data、props、computed、methods、watch…),生命周期钩子属性(created、mounted…)…等很多属性,具体可以参考 官方API文档,这里刚好用到了 el - Vue实例需要挂在的目标DOM元素template - 替换挂在元素的内容模板 。也就是当我们创建Vue实例的时候,它会找到 el 提供的元素 div#app(这里app可以取任意你喜欢的名称,也可以使用类名,但是为了确保不发生冲突和唯一性,最好使用ID名称),然后使用 template 属性的内容将其替换。

数据绑定

当然实际开发中我们的模板不可能是硬编码的方式替换,并且也不可能保持一成不变,既然Vuejs声称是数据驱动视图(MVVM)的响应式框架,我们当然要体验一番了。接下来我们来体验下数据绑定和模板语法。

在创建Vuejs实例是我们提到过的 data 属性就是用来进行数据对象绑定的,我们将上面初始化代码修改如下:

123456789
var app = new Vue({  el: "#app",  template: "<h1>{{ msg }}</h1>",  data () {    return {      msg: "Hello Vue.js!"    }  }});

然后刷新页面,发现实现效果是一样的。这里的 data 为一个返回数据对象的函数,当Vue实例创建的时候,会执行该函数,将在实例上添加 $data 属性,并在编译模板 template的时候,将所有双大括号(Mustache语法) 的内容替换为我们定义的属性值。

注意:当创建Vue实例时,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

Too young too simple?

好了,看到这里我想大家都学会如何使用Vuejs了,有人会说了,纳尼?一脸茫然,还没开始就结束了。是的没错,基础知识我们就讲到这里了,因为我不可能将vuejs官方文档都重写一遍,那样太浪费大家时间了,而且官方文档写的实在是太好了,推荐每个人都必须去读一遍。那么问题来了:那么你凭什么这么辛苦跑来读我的文章……说好的 You Don‘t Know Vuejs呢?

那么本文就正式开始吧……

ORZ……这个开场白确实有点长,不过还是有必要的,毕竟要考虑到小白们的感受,大家体谅下。

花式渲染目标元素

上面介绍了最基本的用法,也是最常见的方式,其实Vue对象上还好提供很多种方法,如下:

1.Vue

直接创建Vue实例,这个方法很简单,代码如下:

123456789
new Vue({  el: "#app",  template: "<h1>{{ msg }}</h1>",  data () {    return {      msg: "Hello Vue.js!"    }  }})

2.Vue.extend

Vue.extend(options) 方式是使用Vue构造器的一个“子类”,其参数同Vue(options)一模一样,唯一的不同是没有 el 属性来指定挂载的DOM元素,所以这里需要通过 $mount() 方法,来手动实现挂载。将以上代码修改如下:

123456789
var app = Vue.extend({  template: "<h1>{{ msg }}</h1>",  data () {    return {      msg: "Hello Vue.js!"    }  }})new app().$mount(‘#app‘);

注意这里 Vue.extend 方式是生成了一个 Vue 子类,所以需要 new 关键字来重新创建,然后手动挂载。

3.Vue.component

Vue.component(id, [definition]) 方式是注册一个名称为 id 的全局组件,然后我们可以通过使用该组件来,实现目标元素渲染。其中 definition 参数同 Vue.extend 中的参数一模一样,方法一样,需要使用 $mount() 方法手动挂在。修改代码如下

123456789
var app = Vue.component(‘helloworld‘, {  template: "<h1>{{ msg }}</h1>",  data () {    return {      msg: "Hello Vue.js!"    }  }})new app().$mount(‘#app‘)

既然 Vue.component 是帮我们注册了一个全局组件,那么我们当然是可以通过使用它来渲染了。修改如下:

1234567891011121314
// 1. 注册组件Vue.component(‘helloworld‘, {  template: "<h1>{{ msg }}</h1>",  data () {    return {      msg: "Hello Vue.js!"    }  }})// 2. 通过创建Vue实例来使用new Vue({  el: ‘#app4‘,  template: "<helloworld/>"})

需要注意的是,仅仅注册组件式不够的,我们还要通过创建一个Vue实例,才能使用该组件。

4.Vue.directive

在Vue中可以通过 Vue.directive(id, [definition]) 来自定义一个指令,并且指令的使用是通过在目标元素中添加 v-指令id属性来实现的。修改代码如下:

在 div#app 元素添加指令,如下:

1
<div v-helloworld="msg"></div>

然后修改js代码:

12345678910111213
Vue.directive("helloworld", {  bind: function (el, binding) {    el.innerHTML = "<h1>"+ binding.value +"</h1>"  }})new Vue({  el: "#app",  data () {    return {      msg: "Hello Vue.js!"    }  }})

5.Vue.compile

Vue.compile(template) 参数也就是方法1中的 template 模板字符串属性,然后通过替换 Vue实例的 render 函数,来实现渲染,代码如下:

12345678910
var tpl = Vue.compile(‘<h1>{{ msg }}</h1>‘)new Vue({  el: "#app",  data () {    return {      msg: "Hello Vue.js!"    }  },  render: tpl.render})

其实此方法本质上跟方法1是一样的,只是方法1中通过 template 属性来定义模板,Vue实例在创建的过程中也会调用 render 函数,然后会默认使用 template 的模板值来渲染,而方法5则手动指定了渲染模板。

当然,你也可以直接通过修改 render 函数,来定制化输出内容,这就是接下来要讲到的方法6。

6.render

Vue实例在创建的过程中也会调用 render 函数,render 函数默认会传递一个参数,这里我取名为 createElement, 我们可以通过 createElement 来动态创建一个 VNode,以此来渲染目标元素。代码如下:

1234567891011
new Vue({  el: "#app6",  data () {    return {      msg: "Hello Vue.js!"    }  },  render: function (createElement) {    return createElement(‘h1‘, this.msg)  }})

原文地址:https://www.cnblogs.com/kkdn/p/9222645.html

时间: 2024-11-14 12:48:27

Vuejs - 花式渲染目标元素的相关文章

Ogre 渲染目标解析与多文本合并渲染

实现目标 因为需求,想找一个在Ogre中好用的文本显示,经过查找和一些比对.有三种方案 一利用Overlay的2D显示来达到效果. http://www.ogre3d.org/tikiwiki/tiki-index.php?page=MovableTextOverlay 二重写Renderable与MovableObject,利用对应字体查找到每个字符元素纹理坐标. http://www.ogre3d.org/tikiwiki/tiki-index.php?page=MovableText 三利

获得当前目标元素

html部分 <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> <li>li6</li> </ul> <p>p</p> <span>span</span> 如果用jquery <script>

[ jquery 选择器 :nth-last-of-type() ] 选取指定(p)父元素下的从后向前数的指定第一个子元素(无关目标元素在父元素中所处的位置)

选取指定(p)父元素下的从后向前数的指定第一个子元素(无关目标元素在父元素中所处的位置): 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' conte

相邻元素差的绝对值都是1,在这样的数组中找目标元素

有这样一个数组A,大小为n,相邻元素差的绝对值都是1.如:A={4,5,6,5,6,7,8,9,10,9}.现在,给定A和目标整数t,请找到t在A中的位置.除了依次遍历,还有更好的方法么? 这道题目的解法非常有趣. 数组第一个数为array[0], 要找的数为y,设t = abs(y - array[0]).由于每个相邻的数字之差的绝对值为1.故第t个位置之前的数肯定都比y小.因此直接定位到array[t],重新计算t,t = abs(y – array[t]),再重复上述步骤即可.这种算法主要

将新元素插入到目标元素之后

insertAfter函数代码 function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,targetElement.nextSibling); } }

Vuejs - 组件式开发

初识组件 组件(Component)绝对是 Vue 最强大的功能之一.它可以扩展HTML元素,封装可复用代码.从较高层面讲,可以理解组件为自定义的HTML元素,Vue 的编译器为它添加了特殊强大的功能.所有的 Vue 组件同时也都是 Vue 的实例,因此可以接受相同的选项对象(除了一些特有的选项)并提供相同的生命周期函数. 再来回顾下 你也许不知道的Vuejs - 花式渲染目标元素 中的代码: 123 <div id="app1"> <helloworld/>&

元素渲染

元素是构成REACT应用的最小砖块 元素描述了你在屏幕上想看到的内容. const element =<h1>Hello,world</h1>; 与浏览器的DOM元素不同,REACT元素是创建开销极小的普通对象.REACT DOM会负责更新DOM来与REACT元素保持一致. 注意: 你可能会将元素与另一个被熟知的概念——“组件”混淆起来.我们会在下一个章节介绍组件.组件是由元素构成的.我们强烈建议你不要觉得繁琐而跳过本章节,应当深入阅读这一章节. 将一个元素感染为DOM 假设你的H

Vuejs - 深入浅出响应式系统

Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 Javascript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接,不过理解其工作原理同样非常重要,这样你可以回避一些常见的问题. 原理图剖析 仔细阅读这张官方原理图,大概可以剖析为以下几个步骤: 编译组件:对特殊标记的部分(比如双大括号部分)进行替换为相应的数据值. 收集依赖:对于编译阶段依赖的数据进行监听(这个都是通过 watcher 对象实现的) 通知更新:当步骤2中监听的数据发生变化时,会通知

二分查找如何“花式”卖萌

二分查找,敢说这货埋在土里化到灰里应该都是认得的.其原理思想也是如此的简单明了,敲代码时都懒得经过反射弧.但事实上,据Knuth神犇描述,第一个木有bug的二分查找是这个算法发表之后12年在出现,但后来发现还是存在一些数组越界的小问题.而如今,我们大都是开门见山的学习被前辈们优化证明的算法,这也是“牛逼顿”所谓的站在巨人的肩膀上,却也如此. 回头来看二分查找如何“花式”卖萌. Problem:给定一个有序数组A,且数组中的元素存在重复,各大一个目标值target,求目标值在数组的的下标的区间(即