vue快速入门（一）

vue快速入门一

by---天溟

vue是目前相当流行的一种用于构建用户界面的渐进式框架，现在先简单的说说vue的一些入门知识：

1.搭建vue开发环境;

a)搭建node.js环境

b)安装vue.cli脚手架工具

i.安装好node后打开windows命令行工具直接输入:

1.npm install –global vue-cli如果安装了淘宝的cnpm可以把”npm”改成cnpm安装;

a)cnpm安装方式:命令行输入:

i.npm install–gcnpm –registry=https://registry.npm.taobao.org;

2.创建项目先cd到需要创建的项目目录下(或者直接在)目录下按:“shift+鼠标右键”选择打开powershell窗口.

a)vue init webpack vue-demo01(即项目名)/vue init webpack-simple vue-demo02(***更方便)

b)cd vue-demo01

c)npm/cnpminstall

d)npm run dev

3.运行别人的项目方法:

a)npm/cnpminstall

b)npm run dev

c)打开对应的本地服务器localhost:端口号

4..vue文件内代码书写模板:

html代码模板

export default {

data(){

return(){

里面放需要的各种数据,注意data是一个函数形式

}

},

Props:[//这里放子元素接收的父元素的数据或方法],

methods: {

里面放方法:

fn1:function(){},

fn2(){}

},

computed:{//这里是计算属性,使用时像使用data数据一样,能直接运行定义的方法(具有缓存作用)},

//以下是生命周期函数(钩子):

beforeCreated(){//实例创建前},

created(){//实例创建完成},

beforeMounted(){//模板编译前},

mounted(){//模板编译完成//最重要,请求数据等放在这里},

beforeUpdate(){//数据更新前},

updated(){//数据更新完成},

beforeDestroy(){//实例销毁前//页面销毁前要保存数据,可以监听这个函数},

destroyed(){//实例销毁完成}

……

}

5.绑定属性方法:

v-bind:属性名=”(data里的)属性”可简写为:“:属性名=’(data里的)属性’”

6.绑定事件,如:v-on:click=’函数名+()’(可以简写为:@click=’函数名()’)

7.绑定html

v-html=”data里的html属性”

8.css局部作用域:

在style标签中加”scoped”属性,可以使css样式只对改组件生效;

9.绑定数据的方法:

a)标签在中间用{{data里面的数据名}}:如:

{{data里面的数据名}}

;

b)v-text:如

10.循环数据生成标签:如

a)

{}

b)如需加索引值,然后单独绑定其他属性可以:

{}

11.绑定动态属性:

a)

12.双向数据绑定:v-model=’ msg ’;MVVM(model改变会影响视图,试图改变会影响model),必须用在表单中,etc:

a)获取表单数据

i.{{msg}}

ii.

iii. ;

b)设置表单数据:

i.{{msg}}

ii.

iii.通过方法里设置msg这样就实现了双向数据绑定的数据获取跟设置;

13.获取dom节点:

a)(就是获取dom节点,不限于是什么标签)

b)

c)methods:{

getIptValue(){

}

}

14.设置,获取数据

a)

{{msg}}

b)

c)Methods:{

getMsg(){

alert(this.msg)

}

setMsg(){

this.msg=“改变后的数据”

}

}

15.获取事件对象:

a)

b)Methods: {

eventFn(e){

e.srcElement //获取了触发事件的dom节点

}

}

16.localstorage保存本地数据:

localstorage.setItem(‘数据名’,JSON.stringfy(this.数据名));

获取保存的数据:

JSON.parse(localStorage.getItem(‘数据名’));

17.挂载组件:

在需要挂载组件的组件下通过:

a)import名字from’路径’

b)在component下注册组件:

i.component:{(使用组件时写的名字如:)‘v-comp’:(引入时的)名字}

c)使用时在template中通过:使用

18.生命周期函数(钩子):

a)组件挂载,组件更新以及组件销毁时触发的一系列方法,叫做生命周期函数;

提示：文章未完，敬请期待哦！