初入vue.js(1)
本文章属于个人在学习vue的随笔,留作与大家分享,技术交流之用,如果有错误,请大家多多指正。谢谢
首先说一下vue的使用方式:
vue的使用方式一共有两种,第一种是直接在官网上下载vue.js的文件,之后在HTML页面里面直接使用script标签进行引用即可。另一种方式是使用vue-cil,使用node.js进行vue的手脚架的搭建。相比两种方式,第一种更适合初学者。第二种方式更适合vue的专业开发人员使用。这里由于我也是初学者。哈哈,就使用第一种方式来搭建vue环境。
官方的vue提供了两个版本,一个是开发版本,另一个是生产版本,顾名思义,开发版本内增加了大量的错误打印,供给开发者调试程序使用。生产版本则去掉了这一部分打印,并且进一步压缩了vue.js的文件体积。使得这个框架变得更轻量,加载速度更快一些。
-----------------------------------------------------------
接下来说vue的第一个新特性,双向绑定特性。Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。在页面里面创建任一元素,然后创建vue的应用,在data属性内声明一个变量,然后使用模板语法{{}}插入对应的js变量,将应的js变量的名称写入双大括号内,里面的值就会被渲染成对应的js的值。那么如何创建一个vue的应用呢?接下来说的就是创建vue应用的方法。
当页面中引入vuejs的时候,会声明一个vue的全局变量,然后我们需要通过new Vue();的方式来创建一个vue的应用,它会返回一个对象,这个对象称之为应用对象,在new Vue()的时候我们需要传递一个对象作为参数,对象中有两个非常重要的属性,一个是el(element),一般它的值是一个选择器,表示选择哪个元素。另一个属性是data。用于保存数据。我们在{{}}中声明了哪些变量,就需要在data中注册这些变量并且为变量进行初始化赋值。
接下来是创建vue应用的代码:
var vm= new Vue({
el: '#app',
data: {
message : 1
}
});
接下来是html引用的代码
<div id="app"> {{ message }} </div>
这样就算是写了一段最简单的vue的vue代码了。
哈哈。
初入vue.js(1)的更多相关文章
- 初入 vue
基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发. 搭建 vue 项目 按官方指引,使用 vue-cli 搭建 vue 的项目. # 安装依赖库,建议指定 vue 和 element ...
- 初入Three.js 第一章
一.什么是WebGL? 1.WebGL是在浏览器中实现三维效果的一套规范. 二.什么是threejs? 1.你将它理解成three + js就可以了.three表示3D的意思,js表示javascri ...
- vue.js 解决空格报错!!!
当我们初入vue.js的时候.使用cli脚手架快速创建项目的时候: 如果语法格式错误(这里主要指的是:空格多少引起的问题)!! 找到 webpack.base.config.js文件注释掉下面的东西 ...
- Vue.js:轻量高效的前端组件化方案(转载)
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
- 【转】Vue.js:轻量高效的前端组件化方案
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
- Vue.js:轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- Vue.js之初印象
一.背景 MVVM模式,很多人在说在用,好吧,我落后了,我目前的项目木有用到MVVM模式的框架,vuejs,reactjs,angularjs,nonono,自己去捣鼓过ng,项目木有用到.实在不敢称 ...
- 包学会之浅入浅出Vue.js:结业篇(转)
蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. 在第一篇<包学会之浅入浅出Vu ...
- 包学会之浅入浅出 Vue.js:开学篇
2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时 ...
随机推荐
- SQL server 统计分组经计
SUM(A.AREA) OVER ( PARTITION BY A.ItemNo, A.PARTS ,A.WIDTH,A.HEIGHT) allotQty, SUM(A.SL) OVER ( PART ...
- UNR#3 Day1——[ 堆+ST表+复杂度分析 ][ 结论 ][ 线段树合并 ]
地址:http://uoj.ac/contest/45 第一题是鸽子固定器. 只会10分.按 s 从小到大排序,然后 dp[ i ][ j ][ k ] 表示前 i 个元素.已经选了 j 个.最小值所 ...
- [BZOJ2225][SPOJ2371]LIS2 - Another Longest Increasing Subsequence Problem:CDQ分治+树状数组+DP
分析 这回试了一下三级标题,不知道效果怎么样? 回到正题,二维最长上升子序列......嗯,我会树套树. 考虑\(CDQ\)分治,算法流程: 先递归进入左子区间. 将左,右子区间按\(x\)排序. 归 ...
- Spring Cloud教程(九)应用程序上下文服务
Spring Boot对于如何使用Spring构建应用程序有一个看法:例如它具有常规配置文件的常规位置,以及用于常见管理和监视任务的端点.Spring Cloud建立在此之上,并添加了一些可能系统中所 ...
- postgresql中实现oracle SYS_CONNECT_BY_PATH
oracle: select sys_connect_by_path(t2.ID, '/') as PATH, t1.id from HTD_DEVICETYPE_RELATI ...
- 使用JS将图片转为Base64
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [转]python常用的十进制、16进制、字符串、字节串之间的转换
阅读目录(Content) 整数之间的进制转换: 字符串转整数: 字节串转整数: 整数转字节串: 字符串转字节串: 字节串转字符串: 测试用的python源码 进行协议解析时,总是会遇到各种各样的数据 ...
- tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
在执行自动化打包的时候报错,检查发现是Xcode的路径被改了 标记3的地方原来默认是没有内容的,点击它,然后会自动弹出一个选项,就是xcode的版本. 修改后,在命令行输入xcodebuild命令测试 ...
- python-网络编程requests模块
urllib模块去请求的确比较麻烦,需要不断的encode和decode:而requests模块就比较方便了,它是基于requests模块开发的第三方模块,安装简单只需要 pip install r ...
- Vultr CentOS下后台跑node
在Mac或者Windows下简直易如反掌.几行命令搞定的事情,但因为使用的是远程SSH连接纯命令行处理,所以需要记录下来怎么弄. 比如, 1. 怎么在什么都没有的CentOS里下载Node安装包? 2 ...