vue 官网:https://cn.vuejs.org/
vue-cli 脚手架: https://cli.vuejs.org/zh/guide/prototyping.html
安装vue-cli 脚手架
验证是否安装成功
vue -V
1.创建一个项目
vue create hello-world
也可以 使用图形化界面创建
vue ui
2.配置好之后还可以配置一些选项:端口,代理等等 vue.config.js
https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
配置兼容目标浏览器:https://github.com/browserslist/browserslist
.browserslistrc 文件中配置
// vue.config.js
module.exports = {
// 代理服务器
devServer: {
proxy: {
'/app': {
target: 'https://11.239.175.78',
pathRewrite: {
'/app': '/app'
},
changeOrigin: true // target是域名的话,需要这个参数,
}
},
https: true,
disableHostCheck: true,
host: 'localhost',// 0.0.0.0
port: 888
}
}
。生命周期
export default {
data() {
return {
value: true
}
},
beforeCreate() {
},
created() {
},
beforeMount() {
},
mounted() {
this.$nextTick(() => {
console.log("dom 全部渲染完成");
})
},
beforeUpdate() {
},
updated() {
},
beforeDestroy() {
},
destroyed() {
},
methods: {
/**
*
*/
change() {
this.value=!this.value;
}
},
computed: {
key() {
return this.$route.fullPath
}
},
filters: {
/**
*
*/
tofixed(value) {
return value.toFixed(2);
}
},
watch: {
value(newValue, oldValue) {
console.log(oldValue, newValue);
}
}
};
。指令
v-if
v-show
v-for
: 相当于 v-bind
@
v-text
v-html
v-model
。父子组件间的传值
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="submit">子传父</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
},
methods: {
submit() {
this.$store.dispatch("hvuex",Math.random());
this.$emit("changeValue",Math.random());
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div id="app">
<router-view :key="key"></router-view>
<div @click="change">{{1.0000000|tofixed}}</div>
<HelloWorld :msg="msg" @changeValue="changeValue"></HelloWorld>
</div>
</template>
<script>
export default {
data() {
return {
value: true,
msg:"父组件传递的信息"
}
},
beforeCreate() {
},
created() {
},
beforeMount() {
},
mounted() {
this.$nextTick(() => {
console.log("dom 全部渲染完成");
})
},
beforeUpdate() {
},
updated() {
},
beforeDestroy() {
},
destroyed() {
},
methods: {
/**
*
*/
change() {
this.value=!this.value;
},
/**
* @param {string} value
*/
changeValue(value){
console.log("子传父",value);
}
},
computed: {
key() {
return this.$route.fullPath
}
},
filters: {
/**
*
*/
tofixed(value) {
return value.toFixed(2);
}
},
watch: {
value(newValue, oldValue) {
console.log(oldValue, newValue);
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
。路由
官网文档:https://router.vuejs.org/zh/guide/#javascript
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
const routes = [
{
path: '/',
component: resolve => require(['../views/index.vue'], resolve),
meta:{require:false},
children:[]
},
{
path: '/detail/:projectId?',// /detail/:projectId?
component: resolve => require(['../views/detail.vue'], resolve),
meta:{require:true}
},
{
path: '/page2',//
component: resolve => require(['../views/page2.vue'], resolve),
meta:{require:false}
},
{
path: '*',
component: resolve => require(['../views/index.vue'], resolve),
meta:{require:true}
}
]
const router = new Router({
history: true,
routes
});
/**
* 路由守卫
* @param {Object} to
* @param {Object} from
* @param {Function} next
*/
router.beforeEach((to, from, next) => {
// 确保一定要调用 next()
console.log(to, from, next);
if (to.matched.some(record => record.meta.require)) {
console.warn("need auth");
next()
} else {
next()
}
});
export default router;
获取路由参数
this.$route.params.projectId
this.$route.query.userId
路由跳转:https://router.vuejs.org/zh/guide/essentials/navigation.html
//this.$router.push("/page2?userId=222");
//this.$router.push({ name: 'page2', params: { userId: '123' }})
this.$router.push({ path: '/page2', query: { userId: '123' }})
//this.$router.push({ path: 'page2', query: { userId: '123' }})
。vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 55
},
mutations: {
increment(state, v) {
state.count += v;
}
},
actions: {
hvuex({ state, commit }, value) {
commit('increment', value)
}
}
});
export default store;
。
detail.vue
<template>
<div>
{{projectId}}
<button @click="toUrl">跳转</button>
</div>
</template>
<script>
export default {
data() {
return {
projectId: this.$route.params.projectId
}
},
created() {
console.log(this.$route.params)
},
methods:{
toUrl(){
//this.$router.push("/page2?userId=222");
//this.$router.push({ name: 'page2', params: { userId: '123' }})
this.$router.push({ path: '/page2', query: { userId: '123' }})
//this.$router.push({ path: 'page2', query: { userId: '123' }})
}
}
}
</script>
page2.vue
<template>
<div>
{{userId}}
</div>
</template>
<script>
export default {
data(){
return{
userId:this.$route.query.userId
}
},
created(){
},
mounted(){
}
}
</script>
import Vue from "vue";
import App from "./App.vue";
import router from "./router/index";
import HelloWorld from "./components/HelloWorld";
import store from "./vuex/index";
Vue.config.productionTip = false;
Vue.component("HelloWorld",HelloWorld);
window.hv=new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");