Vue 入门之概念
Vue 简介
Vue 是一个前端的双向绑定类的框架，发音[读音 /vjuː/, 类似于 [view]。新的 Vue 版本参考了 React 的部分设计，当然也有自己独特的地方，比如 Vue 的单文件组件开发方式都很有创新，另外 Vue 自身的一些绑定的语法、用法等都非常精炼，很容易上手，而且第三方的插件都非常丰富，社区非常活跃，最新的文档都有中文版本。而且 Vue 配合官方的和第三方的库可以实现单文件的组件化开发、SPA 等现代化前端开发。
详情请参考Vue 官网
Vue 的入门 demo
Vue 可以直接把它当做一个 js 库使用，所以它可以很容易的接入到你的项目或者单个页面中。甚至你可以只使用它的双向绑定功能。所以它很容易上手。
比如：我们有一个需求，一个网页上一个 Div 标签，我们有一个 json 对象数据，现在要把 json 对象上的数据放到 Div 上去。
接下来是步骤：
第一步： 创建一个文件夹并创建一个html文件 比如：index.html.
当如你可以选择你自己的编辑器，我就用VSCode。
第二步：引入Vue库
<script src="https://unpkg.com/vue/dist/vue.js"></script>
当然了你可以直接下载Vue的js文件，推荐你直接用上面的cdn即可。
第三步：创建一个Div，给它一个id，比如：app
第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。最终的代码如下：
<!DOCTYPE html> <!--第一步：创建文件夹及html文件-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之Helloworld</title>
<!--第二步：引入Vue库-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--第三步:创建一个Div-->
<div id="app">
<!--Vue的模板的绑定数据的方法， 类似于很多其他前端的模板，可以用两对花括号进行绑定Vue中的数据对象的属性 -->
{{ message }}
</div> <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
<script>
new Vue({ // 创建Vue对象。Vue的核心对象。
el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
data: { // data: 是Vue对象中绑定的数据
message: 'Hello Vue!' // message 自定义的数据
}
});
</script>
</body>
</html>
最终的结果就是：
Hello Vue!Vue 的 Helloworld 总结
- Vue 构造函数的：选项 el 属性，就是 element 缩写，当前 Vue 对象挂载到哪个标签上的语法，支持 CSS 选择器或者 dom 对象，一般用 id 选择器选择当前页面的标签。
- Vue 的选项：data 属性是自定义数据。这里我们只是演示了一个 message 属性，vue 会把自定义的数据可以与 html 的模板数据进行绑定。
- Vue 数据绑定的方式就是用
{{}}，类似于 handlebars. - 上面这个 demo 就是演示了 Vue 的绑定数据的基本模型。注意点，标签先创建好了之后，再创建 Vue 对象，具体你应该懂吧。
Vue 入门之概念的更多相关文章
- vue入门——基本概念
1. 挂载点,模板,实例的关系? 首先附上一个基本demo: <!DOCTYPE html> <html lang="en"> <head> & ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue 入门之 Vuex 实战
Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就 ...
- 09Vue.js快速入门-Vue入门之Vuex实战
9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进 ...
- vue入门 0 小demo (挂载点、模板、实例)
vue入门 0 小demo (挂载点.模板) 用直接的引用vue.js 首先 讲几个基本的概念 1.挂载点即el:vue 实例化时 元素挂靠的地方. 2.模板 即template:vue 实例化时挂 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
随机推荐
- Zookeeper核心原理
Zookeeper 的核心原理 Zookeeper 的由来 各个节点的数据一致性 怎么保证任务只在一个节点执行 如果orderserver1挂了,其他节点如何发现并接替 存在共享资源,互斥性.安全性 ...
- java核心技术-多线程之线程基础
说起线程,无法免俗首先要弄清楚的三个概念就是:进程.线程.协程.OK,那什么是进程,什么是线程,哪协程又是啥东西.进程:进程可以简单的理解为运行在操作系统中的程序,程序时静态代码,进程是动态运行着的代 ...
- PyCharm编辑HTML文件时输入{%不能自动补全
在PyCharm编辑HTML文件时输入Django模板语言时,发现录入 {% 不能自动补全. 找了一下,发现 setting 里可以设置 Python Template Languages,选择自己使 ...
- macOS 开启 VNC 远程桌面和 SSH 服务
macOS 开启 VNC 远程桌面和 SSH 服务 准备用 macOS 来做为服务器,既然是服务器,那不可缺少的是远程管理,实际上 macOS 自带 VNC 远程桌面和 SSH 服务,只是默认没有开启 ...
- php基础知识考察点：自定义函数及内部函数考察点
1.变量的作用域和静态变量 函数的参数以及参数的引用传递 函数的返回值以及引用返回 外部文件的导入 系统内置函数的考察 变量的作用域也称为变量的范围,变量的范围即他定义上下文的背景(也是它生效的范围) ...
- go语言的结构体指针
Go 语言结构体 Go 语言中数组可以存储同一类型的数据,但在结构体中我们可以为不同项定义不同的数据类型. 结构体是由一系列具有相同类型或不同类型的数据构成的数据集合. 结构体表示一项记录,比 ...
- 【转】WCF扩展系列 - 行为扩展(Behaviors)
原文:https://www.cnblogs.com/Creator/archive/2011/05/21/2052687.html 这个系列的第一部分将会重点关注WCF行为(behaviors),W ...
- react fake double , bind click and dblclick on the same element
smartClick:function(id,name,waiter,e){ var desk = $$(e.currentTarget).data('raw'); if(this.lastClick ...
- uliweb的模版
uliweb模版的文件名是与函数名相同的 以test为例: ***@Android:~/ablog# vim apps/blog/templates/test.html 编辑test.html的内容 ...
- wpf mediakit 摄像头截图
原文:wpf mediakit 摄像头截图 在用VideoCaptureElement的过程中,不知道怎么获得摄像头的截图,纠结了整整一天, 最终在下面的网站上找到了答案,哈哈.(困的都不清醒的大脑, ...