vue2.0从入门到入坑
来源:互联网 发布:老虎为什么数量少 知乎 编辑:程序博客网 时间:2024/05/24 00:50
1.接触vue
从原生js、jq到接触vue,刚开始感觉真的非常不习惯,写html的时候,我就不习惯标签上大量的class,这下到vue,感觉更爆炸了,标签上全是指令,甚至还有逻辑,一度感到很暴躁,但是,深入接触之后,才发现vue的魅力。
为什么感觉反差很大呢?因为以前用js、jq都是直接操作DOM来进行一系列的操作,基本上写js、jq最多的就是document.getElementById()或者$()这样的选择元素了,但是vue基本上不需要你进行各种各样的DOM操作,因为vue是以数据驱动的,基本上所有的页面上的改变都是基于数据的变化,不过偶尔也需要去操作DOM,刚开始不怎么了解数据驱动,但是接触了之后,发现数据驱动真的是太美妙了啊,根本不需要进行DOM的操作,只需要对数据进行操作,页面就会发生响应,感觉就像打开了新世界的大门一样。
2.vue的安装
# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖,走你$ cd my-project$ npm install$ npm run dev
这是官网的命令行安装工具.
安装之后目录是这样的:
build和config都是webpack的配置文件,node_modules是项目的各种依赖包,src一般用来放项目的css、js、vue等文件。
我的文件目录是这样的:
resource用来放置psd、标注图,src下的common用来放置需要被引入的字体图标、js、scss文件,components来放置单文件组件.
下面来介绍各种文件的作用:
- .babelrc是用来对es6语法进行转义.
- .gitignore是不需要被git上传的文件.
- package.json 项目的描述目录,里面包括了项目的开发依赖和运行依赖
- .editorconfig是代码书写格式
Vue的基本语法
1 . 插值
<span>{{ msg }}</span>
msg可以是data中的值,也可以是计算属性返回的值.在插值中也可以写简单的表达式.
2 . v-bind 指令
这个指令在vue中用的非常多,所以经常简写为:,一般用来绑定属性,比如class,可以这样写:
<span :class="msg"></span>// msg为data中的值或者为计算属性
也可以这样写:
<span :class="{active: isActive}"></span>
这样class的值就由isActive决定,如果isActive为true,则class为active
甚至可以写一个表达式:
<span :class="{active: isActive===1}"></span>
3 .计算属性
计算属性一般都是像下面这样:
computed: { say() { return 'fzz' + this.msg; }}
写在computed之内,并且要返回一个值,这样就可以在插值中或者v-bind指令中调用.
4 .v-on
这个指令和addEventListener类似,可以用来监听事件,一般用@来简写,比如:
<span @click="do"></span>
这样当点击span之后就会调用do方法
另外,@click后面还可以带参数,比如:
<span @click.stop="do"></span>
这样click事件就不会冒泡,其他的参数还有prevent,once等等
5.methods
methods在组件中可以用来定义一些方法:
methods: { hello() { alert('hello'); }}
方法一般是在事件中被调用,不过也可以在v-show,v-if等指令中调用.
6 .v-if,v-show
v-if可以根据条件来判断是否渲染这个元素,v-show则是元素已经被渲染,通过style.display来控制是否显示这个元素.
<span v-if="active"></span><span v-show="active"></span>
也可以在后面写表达式或者计算属性
<span v-if="1===2"></span><span v-if="flag"></span>computed: { flag() { return this.msg === 'haha'; }}
7.filters过滤
过滤器一般用来对{{ }}中的值进行过滤,例如
<span>{{ msg | upper }}</span>filters: { upper(msg) { return msg.toString().toUpperCase(); }}
upper中的msg代表被过滤的值.
8.v-for遍历
v-for可以对数据进行遍历,从而渲染元素,例如:
<ul> <li v-for="item in items"></li></ul>data() { return { items: [1,2,3] }}
也可以这样:
<ul> <li v-for="item in 10></li></ul>
这样可以渲染出10个li
还可以这样:
<template v-for="item in items"> <h2>curry</h2> <p>curry is very cool!</p></template>data() { return{ items: [1,2,3] };}
这样用template充当容器,最后渲染出的结果并不会包含template元素
以上就是vue的基本语法了
- vue2.0从入门到入坑
- vue2.0从入门到努力(1)--安装环境
- Vue2.0入门
- vue2.0 入门
- vue2.0入门(一)
- vue2.0入门--创建项目
- vue2.0组件快速入门
- vue2 入门
- vue2+webpack+express 简单入门:从前端到后台
- vue2.0学习入门(webpack)
- 入门Vue2.0及学习实战项目
- Vue2入门小结
- Vue2.0 新手入门 — 从环境搭建到发布
- Vue2.0 新手入门 — 从环境搭建到发布
- Vue2.0 新手入门 — 从环境搭建到发布
- Vue2.0 新手入门 — 从环境搭建到发布
- vue2.0
- vue2.0
- Topcoder SRM523-527(DIV2)
- 双向链表的C++实现
- 四、java常见日期函数
- linux学习笔记(系统管理命令)
- 这20个正则表达式,让你少写1,000行代码
- vue2.0从入门到入坑
- Activity跳转方式总结
- Jenkins使用shell脚本部署到远程服务器步骤
- Tomcat+MyEclipse 动态资源开发及部署
- Http协议及如何请求 快速入门
- 动态顺序表的实现,插入删除查找修改...
- NC5X单据列表多选控制
- 蓝桥杯题—BASIC-1闰年判断 BASIC-2 01字串 BASIC-3 字母图形
- 【JZOJ 3893】 画矩形