vue入门知识
vue的特点在于:响应的数据绑定、组合的视图组件。
vue的文件,分成三个部分<template>html模板</template> <script>js</script> <style>css<style>,这三个部分组成一个vue的组件。
我们先用vue-cli来初始化一个项目。
1.Node.js安装
https://nodejs.org/en/download/
2.安装vue-cli
npm install -g vue-cli
3.使用vue-cli初始化项目
vue init webpack-simple my-project-name
4、进到目录
cd my-project
5、安装依赖
npm install
6、开始运行
npm run dev
运行后我们就可以在浏览器中看到一个这样的页面了

这是我们刚刚安装的vue项目,现在我们可以把它原来的页面删除或者改动,写自己需要的项目了。
new一个vue对象,主要包含了三个重要的属性data(vue对象的数据相当于model)、method(vue对象的方法)、watch(vue对象的事件监听)
模板指令将视图层(html)和逻辑层(data)连接起来,常用的模板指令:
v-if(v-show):判断指令
v-text(v-html、{{}}):模板渲染
v-for:循环指令
v-on:事件绑定
vue入门知识的更多相关文章
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- React的入门知识与概念【1】
回顾在以往的项目开发中,从最初的使用的原生html+js+css+jquery开发,到后来随着项目功能的增加,也渐渐学习了Vue.js框架的开发,以及Vue.js的全家桶Axios,Vue-route ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- vue入门(二)----模板与计算属性
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
- Vue大概知识体系和学习参考
Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.run ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- 为什么说Objective-C是一门动态的语言?
object-c类的类型和数据变量的类型都是在运行是确定的,而不是在编译时确定.例如:多态特性,我们可以使用父类对象来指向子类对象,并且可以用来调用子类的方法.运行时(runtime)特性,我们可以动 ...
- js学习日记-new Object和Object.create到底干了啥
function Car () { this.color = "red"; } Car.prototype.sayHi=function(){ console.log('你好') ...
- tp5 常见问题 模板文件 路由
W:视图 Q:是MVC中的V,也就是在模块下面的view目录下的html文件,就是写的页面. W:模板 Q:视图在控制器的叫法,在fetch,display等方法中传入的模板参数 最后传到视图. ...
- Laxcus大数据分布计算演示实例
Laxcus大数据管理系统提供了基于Diffuse/Converge分布算法的计算能力.算法的具体介绍详见<Laxcus:大数据处理系统>一文.本图展示了在集群环境下的随机数产生.排序.显 ...
- LeetCode 61——旋转链表
1. 题目 2. 解答 2.1. 方法一 将链表每个节点向右移动 1 个位置,其实就是让链表最后一个结点指向第一个结点. 因此,向右移动 k 个位置就重复上述过程 k 次即可. 然后,我们注意到,若链 ...
- Cassandra 在CQL中使用函数
CQL 3.1 最后更新 2015年10月10日 maxTimeuuid() now() dateOf() minTimeuuid() --假设表结构如下 create table user ( us ...
- 一些排序算法的Python实现
''' Created on 2016/12/16 Created by freeol.cn 一些排序算法的Python实现 @author: 拽拽绅士 ''' '''值交换''' def swap( ...
- Truffle3.0集成NodeJS并完全跑通(附详细实例,可能的错误)
Truffle3.0集成NodeJS并完全跑通(附详细实例,可能的错误) Truffle3.0集成NodeJS并完全跑通(附详细实例,可能的错误) 升级到Truffle3.0 如果之前安装的是Truf ...
- JavaSE复习(五)网络编程
客户端:java.net.Socket 类表示.创建Socket对象,向服务端发出连接请求,服务端响应请求,两者建立连接开始通信 服务端:java.net.ServerSocket 类表示.创建Ser ...
- webstorm-前端javascript开发神器中文教程和技巧分享(转)
webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享. webstorm8.0.3中文汉化版下载: 百度网盘下载:http://pan.baidu ...