Vue-cli傻瓜教程(语法篇)
- 简单的介绍
- 简单的代码
- router-link
- v-bind
- 表达式
- ES6
- v-for
- v-on
- 常用钩子
- 数据
- 资源
简单的介绍
- .vue文件只有三个根标签
- 分别是
template
、script
、style
- 分别对应
html
、js
、css
简单的代码
html:
<router-link :to="pathUrl">{{msg}}</router-link>
js:
export default {
name: 'Index',
data() {
return {
msg: 'Vue-cli',
pathUrl: '/workflow'
}
}
}
css:
<style scoped>
a{
color: #fff;
}
</style>
router-link走你
<router-link to="/workflow">workflow</router-link>
router-link
是一个vue自带的标签,用于路由的跳转
渲染后为a
标签
但不同的是该标签不支持target="_blank"
属性
而且是用来跳路由的即把目标地址写在to
后
v-bind走你
html:
<input type="text" placeholder="msg">
js:
export default {
name: 'demo',
data() {
return {
msg: '双向绑定'
}
}
}
:
为v-bind
的缩写,常用于双向绑定
表达式
html:
<div>{{msg}}</div>
js:
export default {
name: 'demo',
data() {
return {
msg: '双向绑定'
}
}
}
ES6走你
import 组件名 from '地址'
export default {
name: 'demo',
data() {
return {
}
}
}
vue里使用了ES6里头的
import
和export
用于组件之间的导入和导出
v-for走你
html:
<ul>
<li v-for="tmp in list">
<router-link :to="tmp.pathUrl">
<div>{{tmp.msg}}</div>
<div>
<img :src="tmp.pic" alt="no found">
</div>
</router-link>
</li>
</ul>
js:
export default {
name: 'demo',
data() {
return {
list: [
{
num : 1,
msg : '11',
pic : '../img/1.jpg',
pathUrl : '/demo1'
},
{
num : 2,
msg : '22',
pic : '../img/2.jpg',
pathUrl : '/demo2'
}
]
}
}
}
v-for
等同于js
里面的for
循环
通常用于列表渲染也可以通过一个对象的属性
因为vue的机制,每个v-for
后面需要加带一个属性key='xxx'
以区分多个遍历对象
v-on走你
html:
<button v-on:click="toDemo">toDemo</button>
<button @:click="toDemo">toDemo</button>
<button @click.prevent="toDemo">toDemo</button>
js:
methods: {
toDemo() {
console.log(toDemo);
}
}
v-on
用于绑定事件监听
缩写为@
,阻止默认事件prevent
methods
与data
同级
常用钩子走你
什么是勾子呢,先看看一张图压压惊
看完是不是更不淡定了,这是一张vue的生命周期图
红色框框就是钩子了,当你需要在某个状态下访问或者操作数据时你就可以用上钩子
常用的钩子有这么几个
created
实例创建后使用
mounted
整个视图都渲染完毕后使用
updated
数据更改导致的 DOM 重新渲染时使用
activated
组件激活时使用
destroyed
实例销毁后调用
数据
- data
- props
- computed
- methods
- watch
data
通常是以一个function
所需的参数写在return
的对象里
data(){
return {
name : 'demo'
}
}
props
可以是数组或对象,用来接收来自父组件的参数
props: ['fathers']
computed
是一个计算属性
data: { a: 1 },
computed: {
aDouble: function () {
return this.a * 2
},
}
methods
作用等同于script
标签里面存放方法
methods: {
plus: function () {
this.a++
}
}
watch
vue的监听属性
data() {
return {
num: 1
}
},
watch : {
num (val) {
if(val!===1){
console.log('不为1');
}else{
console.log('1');
}
}
}
资源
- components
components
当import
进一个组件时需要在里边注册后才能使用
import demo from 'demo'
export default {
data () {},
components : {
demo
}
}