一,安装,搭建与创建项目
1,安装node.js
2,cmd安装vue的脚手架工具(搭建开发环境)
安装命令: npm install --global vue-cli
或cnpm install --global vue-cli
3,创建cd到对应的一个项目里面
比如这里我要在D盘下的VueWork的文件夹中生成一个项目
-D:
-cd VueWork:
-vue init webpack 文件名字
如果创建成功:
1,创建的文件中有package.json文件
2,package.json中有vue与vue-router的版本号
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
如果创建失败或cmd卡顿,需要自己cd到项目名文件夹中输入npm install/cnpm install命令创建
生成了node_modules文件之后
才能执行npm run dev运行项目
4,创建成功后,cd到对应的项目名文件夹中输入npm run dev获取窗口
关于cnpm:
<包管理工具>淘宝镜像
http://npm.taobao.org/
需要在下载了之后才可以使用cnpm来替代npm
作用:让cmd模式下的下载更快
个人建议:还是下载一个cnpm吧,npm下载速度真的实在太慢了。
二,Vue的目录结构
node_modules:项目运行所需要的各种依赖
src:开发所用的资源
.vue文件:显示文件 (html+css+js组成)
main.js:实例化vue
index.html:html的入口文件
package.json:项目的配置文件(版本号,名称....)
webpack.config.js:webpack的配置文件(把.vue的文件打包成浏览器可以解析的文件)
三,Vue几个简单的操作
1,循环 v-for
遍历数组 list:["111","222","3333"],
<li v-for="item in list">
{{item}}
</li>
2,绑定script中的数据到html的属性上
通过v-bind进行绑定:
将title的值绑定到id上
<div v-bind:id="title"></div>
title:'我是一个title',
通过v-text绑定文本:
将msg的值绑定到div里
msg: 'Welcome to Your Vue.js App',
<div v-text="msg"></div>
通过v-html解析双引号中的标签:
将引号中的标签中的文本效果解析出来
h:'<h2>我是一个h2标签</h2>',
<div v-html="h"></div>
3,style操作的多样化:
a, 通过:class('css的名':true/false)进行判定附属性
.red{
color:red;
}
.blue{
color:blue;
}
<div v-html="h" :class="{'blue':!flag}"></div>
b,动态设置style:
先通过css直接调控div框颜色
<div class="box">这是一个box</div>
.box{
width:700px;
height:200px;
background-color:red;
}
动态设置width
boxwidth:200,
<div class="box" v-bind:style="{'width':boxwidth +'px'}">这是一个box DIV</div>
4,关于vue中input标签设置data中的属性对应的值
例子:
<input type="text" v-model='msg'/>
data () {
return {
msg: '你好,我正在测试vue的双向数据绑定',
}
}
5,关于点击事件与data以外的methods中的方法取data中的数据:
点击事件书写:
<button v-on:click="getMsg()">点击我试试看看看弹出的不同</button>
this.数据名直接取得
6,获取ref定义的dom节点
this.$refs.ref值
通过ref的获取设置style
this.$refs.ref值.style.属性名
四,vue双向数据绑定的理解
Vue是一个MVVM的框架 vue就是一个MVVM的框架
M -->model
V -->view
MVVM: model 改变会影响视图view,view视图改变反过来影响model
双向数据绑定必须在表单中运行
实例:
methods:{ //放方法的地方
getMsg(){
alert(this.msg);
}
,setDome(){
this.$refs.MyUserInfoRefA.style.background='red';
alert(this.$refs.myUserInfoRef);
}
},
注意变化: {{msg}} <br/>
<input type="text" v-model='msg' class="myinput" />
<button v-on:click="getMsg()">点击我试试看看看弹出的不同</button>
五,定义与执行方法,执行方法获取data中的数据
1,点击事件的两种定义方式:
<button v-on:click="">点击事件书写一</button>
<button @click="">点击事件书写二</button>
2,通过点击事件双向数据绑定修改data中msg的值:
<button @click="getNewMsg()">点击事件书写三</button>
getNewMsg(){
this.msg="修改了的msg";
},
3,点击事件执行方法传值:
<button @click="getDataFromMethod('111')">执行方法传值</button>
getDataFromMethod(val){
alert(val);
},
4,点击事件获取Dome节点和与自定义属性的值:
<button data-aid="123" @click="getEvent($event)">事件对象获取Dome节点和传值</button>
getEvent(event){
//获取dom节点 e.srcElement.
event.srcElement.style.color="red";
console.log(event.srcElement.dataset.aid); /**获取自定义属性的值 */
}
小案例,给data中定义的空数组赋值< list:[] >
<button @click="setList()">点击事件给空list赋值</button>
<hr />
<ul>
<li v-for="(item, key) in list">
{{key}} -- {{item}}
</li>
</ul>
setList(){
for(var i=0;i<10;i++){
this.list.push("这是第" + i +"条数据");
}
},
六,Storage组件的使用与缓存数据
对list中存入数据,缓存该数据保证刷新后还能存在。
以json格式存储
localStrorage.setItem('key',JSON.stringify(this.list));
生命周期函数:(Vue界面刷新就会触发的方法)
mounted(){
var list = JSON.parse(localStrorage.getItem('list'));
//注意判断是否存在,不要存入空值
if(list){
this.list = list;
}
}
关于localstorage的封装:
src目录下的model文件夹创建storage.js
//封装的localStrorage的本地存储的使用方法
//node.js的基础
var storage={
set(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
},
remove(key){
localStorage.removeItem(key);
}
}
export default storage; //将此方法暴露出去
在App.vue中导入封装的js文件
import storage from './model/storage.js';
七,Vue组件使用方法与生命周期函数:
1,引入组件
组件统一请存放在src下的components文件夹中
import HelloWorld from './components/HelloWorld.vue';
2,挂载组件
components:{
'v-home':HelloWorld,
}
3,模板中使用组件
<v-home></v-home>
生命周期函数:(生命周期钩子)
组件挂载以及组件更新组件销毁的时候出发的一系列的方法,这些方法叫做生命周期函数
生命周期:
1,实例创建之前
2,实例创建完成
3,模板编译之前
4,模板编译完成 /*请求数据 操作dom */
5,数据更新之前
6,数据更新完成
7,实例销毁之前
8,实例销毁完成
实例:<生命周期函数不需被调用>
beforeCreate(){
console.log('实例创建之前');
},
created(){
console.log('实例创建完成');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){
console.log('模板编译完成');
},
beforeUpdate() {
console.log('数据更新之前');
},
updated(){
console.log('数据跟新完毕');
},
beforeDestroy(){
console.log('数据销毁之前');
},
destroyed() {
console.log('数据销毁完毕');
},
八,Vue-Resource使用:
1,安装 npm install vue-resource --save <*一定要加--save来确保写入package.json>
2,main.js中引入
import VueResource from 'vue-resource'
3,main.js中使用插件
Vue.use(VueResource);
请求数据操作:
this.$http.get(地址).then(function(response){
....
例:存放到list中
this.list = response.body.result
},function(err){
....//报错提示
})
九,axios请求数据:
1,安装 npm install axios --save
2,引入 直接在vue文件中引入
import Axios from 'axios';
请求数据操作:
Axios.get(地址).then(function(){
....
例:存放到list中
this.list = response.body.result
}).catch((errr){
....//报错提示
})
十,父子组件传值:
例子:
父组件传值:<v-head :msg='msg'><v-head>
子组件获取值:props:['msg']
子组件可以通过点击事件直接调用父组件中的方法传值。
子组件接收父组件数据验证合法性:
props:{
"title":String, //设置数据类型要求是String类型
"homemsg":String,
"run":...,
}
父组件与子组件之间的主动获取数据与方法:
父获取子:
1,定义一个ref
<v-header ref="header"></v-header>
2, 获取数据
this.$refs.header.属性
this.$refs.header.方法
子获取父:
this.$parent.数据
this.$parent.方法
十一,非父子组件传值:(兄弟组件传值)
在VueEvent.js中:(全球广播数据)
1,引入一个空的Vue实例
import Vue from 'vue';
2,实例化这个空的实例
var VueEvent = new Vue()
3,将实例暴露出去
export default VueEvent
发送组件中引入暴露出来的实例发送数据
import VueEvent from '../model/VueEvent.js';
VueEvent.$emit('广播名',this.msg);
接收组件中引入暴露出来的实例接收数据
import VueEvent from '../model/VueEvent.js';
VueEvent.$on('广播名字',function(data){
...
});
十二,Vue路由:(保证访问不同的界面配置不同的组件)
Vue路由配置:
1,安装
npm install vue-router --save
2,main.js引入并Vue.use(VueRouter)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3,配置路由
a,创建组件,引入组件
实例:
import News from "./components/News";
import Home from "./components/Home";
b,定义路由
const routes =[
{path: '/foo',component:Foo},
{path: '/bar',component:Bar},
{path: '*' ,redirect:'/foo'} //默认跳转的组件
]
c,实例化VueRouter
const router = new VueRouter({
routes //(缩写)相当于 routes:routes
})
d,挂载
new Vue({
el:'#app',
router,
render:h =>h(App)
})
4,根组件中存放路由出口
<router-view></router-view>
*: router-link的使用实现局部跳转,设置导航:
<router-link to="/Home">首页</router-link>
<router-link to="/News">新闻</router-link>
十三,动态路由Get传值与获取值:
动态绑定数据:
<ul>
<li v-for="(item,key) in list">
<router-link :to="'/Contents?key='+ key">{{key}} -- {{item}}</router-link>> <!--Get传值-->
</li>
</ul>
Get传值获取
mounted(){
console.log(this.$route.query); //Get传值获取动态路由传值
}
*:这里获取的值是以键值对的形式传递的
十四,路由编程式跳转与Hash模式(默认)
javascript实现页面的跳转方式(2种):
1, this.$router.push({path:'News'});
2,先给路由设置别名
{path: '/News',component:News,name: 'news'},
然后this.$router.push({name:'news'});
将默认的hash模式改成history模式 --> url去除#
const router = new VueRouter({
mode:'history', /**将默认的hash模式改成history模式 url去除# */
routes //(缩写)相当于 routes:routes
})
*:使用之后需要进行一系列的配置防止后期前端出现的问题
关于配置node.js中的内容...
<Github详情查找配置>
十五,父子路由(路由的嵌套):
Main.js配置实例:
/**嵌套 */
import UserAdd from './components/User/UserAdd';
import UserList from './components/User/UserList';
{path: '/User',component:User,
children:[
{path: '/User/UserAdd',component:UserAdd},
{path: '/User/UserList',component:UserList}
]
},
调用实例:
<router-link to="/User/UserAdd">增加用户</router-link>
问题解决:
;1,关于公司内网创建不了vue项目问题解决:
对npm设置代理,
npm config set proxy http://server:port
2,关于function中作用域指向的问题
getDataFromAxios(){
var apiUrl = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
Axios.get(apiUrl).then(function(response){
console.log(response);
this.list = response.data.result;
}).catch(function(err){
console.log(err);
})
},
报错:TypeError: "this is undefined"
这里的this.list是指向的function对象里面获取的list;
getDataFromAxios(){
var apiUrl = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
var self = this
Axios.get(apiUrl).then(function(response){
console.log(response);
self = response.data.result;
}).catch(function(err){
console.log(err);
})
},
可以在方法外申明指向,调用里面的值存入。