2.Vue 声明式渲染

Hello，我是 Alex 007，一个热爱计算机编程和硬件设计的小白，为啥是007呢？因为叫 Alex 的人太多了，再加上每天007的生活，Alex 007就诞生了。

2.创建第一个Vue应用

这篇文章我将带领大家创建第一个Vue应用，并且讲解一下什么是声明式渲染。

预备知识：

HTML基础知识。HTML的编程水平要达到中级水平，熟悉基本的标签并且自己制作过简单的页面；

CSS基础知识。CSS的水平也要达到中级，最好有半年以上的切图和布局经验；

JavaScript基础知识。要求对基本的语法有了解；

Node.js基础知识。不做要求，最好了解npm的基本使用。

那我接下来呢，我们看这个 Vue.js 的起步和声明式渲染，Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，它的应用可以分为两个重要部分，一个是视图，另一个是脚本。

我们还是来写写代码吧，新建一个index.html文件，在body中创建一个id为app的div标签：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"></div></body>
</html>

然后我们要通过script标签引入Vue.js：

<script type="text/javascript" src="vue.js"></script>

当我们引入Vue.js的时候呢，会声明一个全局变量，它的名字就叫作Vue，通过new Vue的方式可以获得一个Vue对象，这个对象被我们称之为应用对象或者是Vue.js对象。

在new Vue的时候呢，需要注意传递一个对象作为参数，这个对象有两个非常重要的属性，第一个是el(element)，利用id选择器的方式绑定一个div，第二个重要的属性是data，data是一个用于保存数据的对象，我们在视图中使用了哪些变量就需要在data里面声明这些变量。

我们可以声明一个message1变量，值为Hello World，然后在绑定的div中通过h3以双大括号的形式渲染它，就可以就可以看到页面中已经渲染出来了。

       <div id="app"><h3>{{ message1 }}</h3></div><script type="text/javascript">const app = new Vue({el: '#app',data: {message1:'Hello World',},})</script>

到这里之后你可能会有点懵，我们来做一个类比，id为app的div就好像一块地，通过Vue被我们工作室承包了，然后我们想在这块地上种点瓜果蔬菜，这个双大括号就类似于刨的一个个坑，然后把data中准备好的数据一个一个插进入，这就叫插值表达式。

双大括号中除了可以插入data中的数据，还可以直接插入数字、字符串、对象（注意括号）、表达式、函数返回值等等。

       <div id="app"><h3>{{ message1 }}</h3><h3>{{ 123 }}</h3><h3>{{ "Alex" }}</h3><h3>{{ {name: 'Alex',age: 18} }}</h3><h3>{{ 1 != 2 ? 'Nice' : 'Fuck' }}</h3><h3>{{ getName(0) }}</h3></div><script type="text/javascript">const app = new Vue({el: '#app',data: {message1: 'Hello World',},methods: {getName(userId) {return 'Alex';},}})</script>

现在我们已经创建了第一个Vue应用，看起来这就是渲染一个字符串模板，但是Vue在背后做了大量的工作。

在Vue中数据和DOM已经被建立了关联，所有的东西都是响应式的，这也正是Vue的魅力所在。

好了，这篇文章的内容就讲到这里，我们创建了一个Vue应用，然后用了插值表达式，下一篇文章我们讲讲如何在Vue中的条件渲染。

2.Vue 声明式渲染相关推荐

vue概述、vue文件特点、vue核心思想、双向数据流、单文件、启动一个vue项目、声明式渲染
vue介绍: Vue:当前较火的MVVM框架,轻量.简介.高效.组件化.数据驱动,模块和渲染函数的弹性选择,简单的语法及项目创建,渲染速度极快,基于Virtual Dom,利用虚拟DOM实现快速渲染: ...
Vue声明式路由导航和编程式路由导航的优缺点及实现方法
文章目录前言路由实现 1.目标 2.前置条件 <1>安装vue-router插件 <2>写个用于转跳的组件页 <3>写路由文件 <4>写路由锚点 3 ...
vue声明式导航和编程式导航
声明式导航: 声明式导航是写在template标签里,通过<router-link></router-link>标签来触发: <router-link to=" ...
ssm框架里面前端拿HTML写,ssm框架引入Vue，声明式渲染，标签的href拼接字符串
一.引入Vue 在官网上下载vue.js.并用 1.下载Vue.js,地址:Vue.js下载地址二.通过ajax获取后台参数,使用Vue渲染调用后台control,获取到数据,传到前端,使用Vue ...
vue服务端渲染之nuxtjs
前言本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同客户端 ...
第二章 VUE数据绑定和渲染（1）
这节课主题是如何将数据动态绑定到html中并渲染出来. 在一般情况下,前端展示的动态数据,都是从后端(如JAVA,C#,PHP等后端语言提供数据,一般都是json格式)获得数据后,进行解析并渲染到ht ...
通过 React Hooks 声明式地使用 setInterval
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: se ...
声明式导航编程式导航
声明式导航:在浏览器中,点击链接实现导航的方式,叫做声明式导航.如:普通网页中点击<a>链接,vue中点击<router--link>都属于声明式导航. 编程式导航:在浏览器中 ...
路由声明式传参和编程式传参
声明式传参(使用带href /或本质上是a标签的时候) 直接带路径里带携带参数下例在地址栏是可以看到参数的(querys传参) 在vue.tools插件里可以观察到取出路径参数的方式 param ...

2.Vue 声明式渲染

2.Vue 声明式渲染相关推荐

最新文章

热门文章