Vue简介及HelloWord编写

简介

Vue是一套用于构建用户界面的渐进式JavaScript框架，何为渐进式，主要是自底向上逐层应用，并且简单应用可以使用核心库便可完成，如果需要复杂地应用，需要引入一些Vue插件库，这就达到渐进式。

官网：

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

特点：

采用组件化模式，用以提高开发效率，代码复用率，并且能让代码更好地维护。
声明式编码，让开发人员无需直接操纵DOM，只需按一定的规则（标签等语法）声明告诉Vue如何操纵，剩下的就由Vue的底层代码进行处理，提高开发效率。
使用虚拟Dom+优秀Diff算法，尽量复用Dom。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue开发环境

由于初学者就不适用工程化创建，只需引用一个vue的核心库，就能达到使用Vue的程度。
Vue核心库：
https://cn.vuejs.org/v2/guide/installation.html
有两个版本，开发版和生产版：

在开发环境下不要使用生产版本，不然就失去了所有常见错误相关的警告!

把相关库下载到本地，或者引用互联网的链接也行。

vue.min.js是生产版本，vue.js是开发版本。
默认已经知道Visual Code的基本使用。
把这两个文件拷贝到工程文件夹中。

创建一个html文件，引用vue.js文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue 的 HelloWord</title><!-- 引入vue依赖 --><script src="../js/vue.js"></script>
</head>
<body><!--Vue新手五步式：1. 引入vue.js库。2. 编写一个给vue管理的容器，并设立一个Id。3. 创建一个Vue对象，并在构造函数的参数上传入一个配置对象。4. 容器里面的代码依然符合Html规范，比如h1标签会变大变粗，只不过混入了一些特殊的Vue语法。5. 容器里面的代码被称为模板代码，只要我们按照Vue的规则语法完成模板，vue就会解析模板，生成我们想要的页面。--><!-- 创建一个容器 --><div id="root"><!-- vue是一个插值表达式，语法为 {{表达式}}  具体后面再讲 ，现在就会把Vue实例中data对象的accountName属性的值插入到对应的地方-->你好，{{accountName}}</div><script>//关闭开发环境提示Vue.config.productionTip = false;//创建一个vue对象new Vue({el:"#root",  //el是元素element的缩写，用于指定这个Vue对象管理的容器，vue会管理找到的容器及其所有子元素，指定一般可以使用css的选择器语法，也可以使用js原生代码。//el: document.getElementById("root"),     管理容器使用js原生代码data: { // data返回一个对象，代表Vue管理的数据，我们暂时先写成一个对象，但这不是最终写法。accountName:"Yehaocong"}})</script></body>
</html>

效果：

控制台会有点提示：

要想消除第一个提示，就要安装谷歌浏览器的Vue开发者工具，需要翻墙，我这里就准备了一个百度云地址。
https://pan.baidu.com/s/1jDrakkYZAy_FUm-6ThhyPQ 提取码 6666

开发者工具下载下来后，在谷歌上面配置，

打开插件管理：

缩小窗口，但是不要最小化，然后拖动开发者工具文件进去即可。

然后提示就没了：

第二个提示是修改Vue的配置。

一个注意点：
Vue实例跟容器是一一对应的，也就是一个Vue实例只管理一个容器，一个容器只能被一个Vue实例管理。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue 的 HelloWord</title><!-- 引入vue依赖 --><script src="../js/vue.js"></script>
</head>
<body><!-- 创建一个容器 --><div class="root"><!-- vue是一个插值表达式，语法为 {{表达式}}  具体后面再讲 ，现在就会把Vue实例中data对象的accountName属性的值插入到对应的地方-->你好，{{accountName}}</div><div class="root"><!-- vue是一个插值表达式，语法为 {{表达式}}  具体后面再讲 ，现在就会把Vue实例中data对象的accountName属性的值插入到对应的地方-->你好，{{accountName}}</div><div id="root"><!-- vue是一个插值表达式，语法为 {{表达式}}  具体后面再讲 ，现在就会把Vue实例中data对象的accountName属性的值插入到对应的地方-->你好，{{accountName}}我是，{{myName}}</div><script>//关闭开发环境提示Vue.config.productionTip = false;//创建一个vue对象，//这里是1个Vue实例对应2个容器，class是root，测试vue实例与容器能否1对多new Vue({el:".root",  //el是元素element的缩写，用于指定这个Vue对象管理的容器，vue会管理找到的容器及其所有子元素，指定一般可以使用css的选择器语法，也可以使用js原生代码。//el: document.getElementById("root"),  S   管理容器使用js原生代码data: { // data返回一个对象，代表Vue管理的数据，我们暂时先写成一个对象，但这不是最终写法。accountName:"Yehaocong"}})//这里是两个Vue实例对应一个容器，id是root，测试vue实例与容器能否多对一new Vue({el:"#root",  //el是元素element的缩写，用于指定这个Vue对象管理的容器，vue会管理找到的容器及其所有子元素，指定一般可以使用css的选择器语法，也可以使用js原生代码。//el: document.getElementById("root"),  S   管理容器使用js原生代码data: { // data返回一个对象，代表Vue管理的数据，我们暂时先写成一个对象，但这不是最终写法。accountName:"Yehaocong"}})new Vue({el:"#root",  //el是元素element的缩写，用于指定这个Vue对象管理的容器，vue会管理找到的容器及其所有子元素，指定一般可以使用css的选择器语法，也可以使用js原生代码。//el: document.getElementById("root"),  S   管理容器使用js原生代码data: { // data返回一个对象，代表Vue管理的数据，我们暂时先写成一个对象，但这不是最终写法。myName:"LiaoXiaoyan"}})</script></body>
</html>

效果：可以看到第二个是没有渲染成功的，原因是Vue找到第一个符合的容器后就不再继续往下找了，并且控制台还报错了，因为一个容器只会被一个vue实例管理，所以虽然第二个vue实例定义了myName数据，但是没有管理到容器，所以报错

Vue简介及HelloWord编写相关推荐

Vue简介及简单应用
目录一.Vue简介 1.Vue介绍官方说法:Vue是一个构建用户界面(UI)的渐进式JavaScript框架.并且颠覆了传统的MVC模式(js)使用了MVVM模型开发,它实现了前后端分离. 2.库 ...
1.vue简介以及模板语法---vue教程
1. vue简介 vue的组件化后缀名为.vue的文件是vue.js特有文件格式,表示一个vue组件 ,即单页式组件,可承载视图模板-,"样式定义"- 2.vue扩展插件 vue ...
Vue第一部分(1)：Vue简介以及第一个示例
Vue简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的JavaScript框架.封装了原生的DOM操作,无需进行任何手动的DOM编码即可完成页面数据的渲染. MVVM模 ...
vue 简介（MVVM介绍，超详细）
目录 vue 简介 1. 什么是 vue 1.1 解读核心关键词:构建用户界面 1.2 构建用户界面的传统方式 1.3 使用 vue 构建用户界面 1.4 解读核心关键词:框架 1.5 总结:什么是 ...
[转载]简介使用Java编写Palm OS程序的解决方案(2)
简介使用Java编写Palm OS程序的解决方案(2) 简介简介使用Java编写Palm OS程序的解决方案(2) 二.Kawt的解决方案 Kawt也是 KVM的一个 Abstract Window ...
[转载]Java嵌入式开发之一-简介使用Java编写Palm OS程序的解决方案
Java嵌入式开发之一-简介使用Java编写Palm OS程序的解决方案现在,使用Java语言为 Palm OS编写程序的领域还没有完全统一,并且也有许多程度上的差异,目前,市面上有好几种不同的可用 ...
[转载]简介使用Java编写Palm OS程序的解决方案(1)
简介使用Java编写Palm OS程序的解决方案(1) 现在,使用Java语言为 Palm OS编写程序的领域还没有完全统一,并且也有许多程度上的差异,目前,市面上有好几种不同的可用的应用程序接口,每 ...
vue 简介 el 挂载点 data 数据
目录标题 vue简介 vue案例 el 挂载点 data 数据 vue简介 vue案例 <div id="app">{{ message }}</div>& ...
01 【Vue简介初识Vue 模板语法和数据绑定】
1.Vue简介 1.1官网英文官网中文官网 1.2介绍与描述 Vue 是一套用来动态构建用户界面的渐进式JavaScript框架 ○构建用户界面:把数据通过某种办法变成用户界面 ○渐进式:Vue可 ...

Vue简介及HelloWord编写

简介

Vue开发环境

Vue简介及HelloWord编写相关推荐

最新文章

热门文章