Vue基础说明
参考：中文官网
1.基础需求
1.node
2.npm
3.vue-cli
2.新建工程
1.直接进入到文件目录下 打开命令行输入: vue init webpack ”项目名称“
2.使用webstorm直接新建工程 一直下一步即可
3.目录结构
4.启动工程
命令行输入: npm run dev
5.基础语法
1.值绑定
js:
data() { //存储数据
return {
msg: 'Welcome to Your Vue.js App'
}
}
html:
<div>
{{msg}} <!--显示js中的数据-->
</div>
2.条件与循环
-
v-if
html: <div> <p v-if="seen">显示的文本</p> </div> js: data() { //存储数据 return { seen: true } } v-for
html:
<div v-for="item in items">
{{ item.titles }}
</div>
js:
data () {
return{
items:[
{"titles":"标题001"},
{"titles":"标题002"},
{"titles":"标题003"}
]
}
}
3.绑定语法
-
v-on && v-bind
用来绑定事件和属性，用法：v-on:事件="函数",v-bind类似<div id="app-5"> <button v-on:click="click事件">点击事件</button> </div>v-on:click 可以简写成 @click = "click事件"
v-bind:class可以简写成 :class = "css样式",其他的类似此用法
-
v-model
双向绑定<div id="mydiv"> 姓名:<input type="text" name="" v-model='name'> {{name}} </div>
4. 组件化应用
1.父子组件结构
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
// 使用组件
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
2.父子组件传值(父传子)
父组件:
<Toplr :infos = infos @e-hello="getdata"></Toplr>
子组件
props: ['infos'],
watch: {
infos: function (news, old) {
this.datas = this.infos
}
}
2.父子组件传值(子传父)
父组件:
<Toplr :infos = infos @e-hello="getdata"></Toplr>
methods: {
getdata (value) {
this.dates = value
console.log(value)
}
}
子组件:
<button @click="send">向父组件传值</button>
methods: {
send () {
this.$emit('e-hello', '子组件传值')
}
}
3.非父子组件传值
安装vuex
npm install --save vuex
4. 路由守卫
const router = new Router({
// 去掉#
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/center',
name: 'User',
component: User
},
{
path: '/user',
name: 'LGmain',
component: LGmain,
children: [
{
path: 'login',
name: 'Login',
component: Login
},
{
path: 'regist',
name: 'Regist',
component: Regist
}
]
}
]
})
// 路由守卫
router.beforeEach((to, from, next) => {
// let froms = localStorage.getItem('from')
// let whereis=this.$route.path.split('/')[1];
// 此处写路由的name不是路径
const nextRoute = ['User']
let isLogin = localStorage.getItem('token')
let isuser = sessionStorage.getItem('logintype')
if (nextRoute.indexOf(to.name) >= 0) {
if (!isLogin) {
localStorage.setItem('from', to.name)
alert('请先登录')
router.push({name: 'Login'})
return
} else {
if (to.name === 'Aduser' || to.name === 'Adart') {
if (!isuser) {
alert('非法访问')
router.push({name: 'Login'})
return
}
}
}
}
// 验证登录,如果登录进入登录页则返回主页
if (to.name === 'Login') {
if (isLogin) {
router.push({name: 'HelloWorld'})
}
}
next()
})
export default router
5.生命周期
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
