vue学习之环境部署及简单使用

最新推荐文章于 2019-11-27 15:51:58 发布

干饭 No.1

最新推荐文章于 2019-11-27 15:51:58 发布

阅读量161

点赞数

文章标签： vue学习之环境部署及简单使用

本文链接：https://blog.csdn.net/weixin_43884528/article/details/100072215

版权

vue初学者之路

先安装node.js

vue 1.x或者2.x安装及创建项目

npm install --global vue-cli 或者 npm install --global vue-cli
vue init webpack 项目名
cd 项目名
如果创建失败，就运行 cnpm install / npm install
运行项目：npm run dev

如果已经安装了vue的1.x或者2.x，想安装3.x，先卸载，npm uninstall vue-cli -g

vue3.x安装

npm install -g @vue/cli
命令行创建
1. 进入相应的文件夹创建项目：vue create demo（demo是项目名）
2. 运行：npm run serve
3. 编译：npm run build
图形化创建项目：命令行进入文件夹后：vue ui

创建项目记得引入scss

vue主要是以组件方式来构建页面

引入其他页面
这是引入components下的HelloWorld.vue

<HelloWorld></HelloWorld>
<script>
import HelloWorld from Body.vue
export default {
        components: {
             HelloWorld
        }
    }
</script>

#提醒：所有的节点要被根节点包含

v-bind:src为绑定属性

数据绑定,当输入框改变，上面的name也改变

{{name}}
 <input type="text" v-model="name">
 
 data() {
   return {
        name: "cc",
   }
},

todoList判断显示,点击checkbox直接取反

        <input type="text" v-model="message"><button @click="addMes()">添加游戏</button>
        <br>
        <h2>login.....</h2>
        <ul>
            <li v-for="list in lists" v-if="!list.checked">
                <input type="checkbox" v-model="list.checked">
                {{list.title}}
            </li>
        </ul>
        <br>
        <h2>end.....</h2>
        <ul>
            <li v-for="list in lists" v-if="list.checked">
                <input type="checkbox" v-model="list.checked">
                {{list.title}}
            </li>
        </ul>
        
       data() {
           return {
                   message:'',
                       lists:[{checked:false,title:"王者荣耀"},
                           {checked:false,title:"绝地求生"}]
                   }
               },
       methods:{
           addMes(){
                this.lists.push({
                    checked:false,title:this.message
                });
                this.message = '';
       },

也可以通过回车键添加

        <input type="text" v-model="message" @keydown="addMes($event)">
        <br>
        <h2>login.....</h2>
        <ul>
            <li v-for="list in lists" v-if="!list.checked">
                <input type="checkbox" v-model="list.checked">
                {{list.title}}
            </li>
        </ul>
        <br>
        <h2>end.....</h2>
        <ul>
            <li v-for="list in lists" v-if="list.checked">
                <input type="checkbox" v-model="list.checked">
                {{list.title}}
            </li>
        </ul>
        
        addMes(e) {
                        if (e.keyCode == 13) {
                            this.lists.push({
                                checked: false, title: this.message
                            });
                            this.message = '';
        
                        }
        
                    },

封装js—封装本地缓存storage.js

// 封装操作localstorage本地存储的方法  ,模块化的文件，var里面的命名没有影响
var storage={

    set(key,value){
      localStorage.setItem(key,JSON.stringify(value))
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },
};

export default storage; //export default把storage暴露出去

获取封装的js

import storage from './model/storage' //引入，取别名

storage.set("list",this.lists) //方法使用

在style后面加上scoped表示局部作用域

父子组件传值

父组件给子组件传值

父组件调用子组件的时候绑定动态属性如：
子组件通过props接收如：props:[‘title’]或者props:{‘title’}

父组件主动获取子组件的数据和方法

父组件挂载子组件为，如果需要获取子组件的数据和方法，即：this.$refs.header.data/methods

子组件主动获取父组件的数据和方法

this. $p a r e n t . 数据 t h i s .$ parent.方法

非父子组件传值（不常用）

1.新建一个VueEvent.js文件引入vue 实例化vue 然后暴露这个实例,如：

import Vue from 'vue'
var vue = new Vue()
export default vue;

2.在要广播的地方引入刚才创建的js实例

import VueEvent from '../VueEvent.js'

3.在methods中通过VueEvent. $e m i t (^{'} k e y^{'}, 数据) 来广播数据 4 . 在接收数据的地方也要引入创建的 j s 实例，在 m o u n t e d 里通过 V u e E v e n t .$ on(‘key’,function(){})

vue-resource的使用（建议）(用于链接后台获取数据)

1.在项目下安装 cnpm install vue-resource --save
2.在main.js上引用

import vueResource from 'vue-resource';
Vue.use(vueResource);

3.用法

this.$http.get(url).then(function (response) {
           console.log(response);
       },function (err) {
           console.log(err);
       })

axios的使用(个人不建议) (用于链接后台获取数据)

1.在项目目录下安装cnpm install axios --save
2.哪里需要就在哪里引用axios:

import Axios from 'axios' //引入
axios.get(url).then((response)=>{

}).catch((err)=>{
})

跨域访问后台数据问题解决，在后台的函数上加上

        response.addHeader("Access-Control-Allow-Origin", "*");

vue-router使用

在项目目录下安装cnpm install vue-router --save
在main.js引入import VueRouter from ‘vue-router’ 并Vue.use(VueRouter)

配置路由

创建组件引入组件

定义路由（建议复制）

    const routes = {
        {path:'/',component:}
    }

实例化VueRouter

   const router = new VueRouter({
       routes
   })

挂载路由

new Vue({
  router,
  render: h => h(App),
})

把放在根组件的App.vue里面
整个流程为main.js

import Vue from 'vue'
import App from './App.vue'
import vueResource from 'vue-resource';//用来访问后台数据
import VueRouter from 'vue-router'

Vue.use(VueRouter);

// 创建组件
import Header from './components/Header'
import Body from './components/Body'
// 配置路由
const routes = [
    { path:'/header',component:Header},
    { path:'/body',component:Body},
    { path:'*',redirect:'/header'},//当没有任何路由时，默认执行
];

// 实例化vueRouter
const router = new VueRouter({
  routes
});

Vue.use(vueResource);
Vue.config.productionTip = false

new Vue({
  el:'#app',
  router,
  render: h => h(App),
});

动态路由

除开routes里面的写法不一样，上面其他都一样，routes里面的组件路径写法为：{ path:’/content/:pid’,component:Content},
需要点击跳转的按钮写法：{{index}}------{{list.title}}

或者传过来参数为：

   mounted() {
        this.pid=this.pid=this.$route.query.pid;//this.$route.params.pid;为获取参数
        this.getQuestionnaire(this.pid);
    }
   ```

通过js来跳转路由

配置路由

{ path:'/showMessage',component:ShowMessage,name:'show'}//通过name来跳转到相应的vue

跳转方法
不需要传参数

this.$router.push('show');

需要传参数

<button @click="toContent()">通过js跳转到content</button>
toContent(){
               this.$router.push({name:'show'});
},

路由的嵌套

main.js

import Vue from 'vue'
import App from './App.vue'
import vueResource from 'vue-resource';
import VueRouter from 'vue-router'

Vue.use(VueRouter);

// 创建组件
import Header from './components/Header'
import Body from './components/Body'
import Content from './components/Content'
import ShowMessage from './components/ShowMessage'
import User from './components/User'
import UserList from './components/User/UserList'
import AddUser from './components/User/AddUser'
import EditUser from './components/User/EditUser'
import DeleteUser from './components/User/DeleteUser'

// 配置路由
const routes = [
    {path: '/header', component: Header},
    {path: '/body', component: Body},
    {
        path: '/user',
        component: User,
        children:[
            {path:'userList',component:UserList},
            {path:'addUser',component:AddUser},
            {path:'editUser',component:EditUser},
            {path:'deleteUser',component:DeleteUser}
        ]
    },
    {path: '/content/:pid', component: Content},
    {path: '/showMessage', component: ShowMessage},//get方法传值
    {path: '/showMessage', component: ShowMessage, name: 'show'},//通过name方法跳转路由
    {path: '*', redirect: '/header'},//当没有任何链接时，默认执行
];

// 实例化vueRouter
const router = new VueRouter({
    // mode:'history',//把hash模式改为history模式
    routes
});

Vue.use(vueResource);
Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    render: h => h(App),
});

页面跳转，App.vue

<template>
    <div id="app">
        <!--<button @click="flag = !flag">卸载或者挂载头部组件</button>-->
        <router-link to="/body">Body</router-link>
        <router-link to="/header">header</router-link>
        <router-link to="/user/userList">用户中心</router-link> <!--点击时跳出用户中心，但显示内容的区域为用户列表 -->
        <!--<button @click="toContent()">通过js跳转到content</button>-->
        <router-view></router-view>
    </div>
</template>

user.vue，需要在点击链接，子路由显示的区域加入

<template>
    <div id="user">
        <div class="user">
            <div class="left">
                <ul>
                    <li><router-link to="/user/userList">用户列表</router-link></li>
                    <li><router-link to="/user/addUser">增加用户</router-link></li>
                    <li><router-link to="/user/editUser">修改用户</router-link></li>
                    <li><router-link to="/user/deleteUser">删除用户</router-link></li>
                </ul>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </div>

    </div>
</template>

#基于vue的ui

element-ui

安装element-ui

在相应的目录下输入命令行：cnpm install element-ui -S
在main.js中引入mint-ui和相应的css代码如下

import ElementUi from 'element-ui';
import 'element-ui/theme-chalk/index.css'
Vue.use(ElementUi);

用法：https://element.eleme.cn/#/zh-CN/component/quickstart

配置file_loader

如果package.json里的devDependencies没有file-loader就运行命令：cnpm install file-loader --save-dev

mint-ui(基于移动端)

安装mint-ui

在相应的目录下输入命令行：cnpm install mint-ui -S
在main.js中引入mint-ui和相应的css代码如下

import MintUi from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(MintUi);

具体用法：http://mint-ui.github.io/docs/#/zh-cn2

vuex（能不用就不用，一般用在大型项目)

目的：解决不同组件数据共享，数据持久化

vuex的使用

安装vuex:cnpm install vuex --save
src新建一个veux的文件夹
vuex新建一个store.js

在store.js引入vue、vuex,并且use(vuex)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// state在vuex用于存储数据
var state={
   count:1,
   lists:[]
};

// mutation里面放的是方法；主要用于改变state里面的数据
var mutations={
   inCount(){
       ++state.count;
   },
   addList(state,data){  //如果该方法有传值，第一个参数为state，第二个参数为数据
       state.lists = data;
   }
};
// 改变state里面的count数据的时候会触发getters里面的方法 获取新值(基本不用)
var getters={
   computedCount:(state)=>{
       return state.count*2;
   }
}

// 基本没用
var actions={
   inMutationsCount(context){  //执行mutation里面的方法，改变state里面的数据
       context.commit('inCount')
   }
}

// 实例化Vuex.Store
const store = new Vuex.Store({
   state,
   mutations,
   actions,
   getters
});

export default store    //暴露

组件使用vuex

在要用到数据共享的地方进行引用和注册
```vue
{{this.$store.state.count}} //使用state里面的数据

import store from '../../vuex/store.js'

    export default {
        name: "addUser",
        store,//注册
        methods:{
            changeCount(){
                // this.$store.commit('inCount');  //commit触发mutation
                this.$store.dispatch('inMutationsCount'); //dispatch触发action里面的方法
            }
        }
    }
```

小型项目缓存用下面两种

localstrage
sessionstrage

干饭 No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习之环境部署及简单使用

vue初学者之路先安装node.jsvue 1.x或者2.x安装及创建项目npm install --global vue-cli 或者 npm install --global vue-clivue init webpack 项目名cd 项目名如果创建失败，就运行 cnpm install / npm install运行项目：npm run dev如果已经安装了vue的1.x...
复制链接

扫一扫