前端浅学之Vue

Hello Vue

            {{message}}

            var app=new Vue({
                //element,绑定id
                el:"#app",
                data:{
                    message:"hello Vue!"
                }
            })

条件渲染

            Vue is awesmoe
            Oh no

            var app=new Vue({
                //element,绑定id
                el:"#app",
                data:{
                    awesmoe:true
                }
            })

            A
            B
            C
            not A/B/C

            var app=new Vue({
                //element,绑定id
                el:"#app",
                data:{
                    type:'A'
                }
            })

列表渲染

                {{item.message}}

            var app=new Vue({
                //element,绑定id
                el:"#example-1",
                data:{
                    items:[
                        {message:'Foo'},
                        {message:'Bar'}
                    ]
                }
            })

事件处理

            Greet

            var app=new Vue({
                //element,绑定id
                el:"#example-1",
                data:{
                    message:"Hello"
                },
                methods:{
                    greet:function(){
                        alert(this.message)
                    }
                }
            })

Axios

data,json

{
    "name": "百度",
    "url": "https://baidu.com/",
    "page": 66,
    "isNonProfit": true,
    "address": {
        "street": "广州",
        "city": "广东",
        "country": "中国"
    },
    "links": [{
        "name": "博客园",
        "url": "https://www.cnblogs.com/"
    }, {
        "name": "必应",
        "url": "https://www.bing.com/"
    }, {
        "name": "搜狗",
        "url": "https://www.sougou.com/"
    }]
}

                名称：{{info.name}}

                url：{{info.url}}

            var app=new Vue({
                //element,绑定id
                el:"#app",
                data(){
                    return{
                        info:{
                            name:'',
                            url:''
                        }
                    }
                },
                mounted(){
                    axios
                        .get('data.json')
                        .then(response=>this.info=response.data)
                }
            })

表单输入绑定

            Message is :{{message}}

            var app=new Vue({
                //element,绑定id
                el:"#app",
                data:{
                    message:"Hello"
                }
            })

            //定义一个组件
            Vue.component("my-component-li",{
                props:["item"],
                template:'<li>{{item}}</li>'
            })
            var app=new Vue({
                //element,绑定id
                el:"#app",
                data:{
                    items:["张三","李四","王五"]
                }
            })

计算属性

将计算结果缓存，变成静态属性

            当前时间方法:{{getCurrentTime()}}
            当前时间属性:{{getCurrentTime1}}

            var app=new Vue({
                //element,绑定id
                el:"#app",
                //方法
                methods:{
                    getCurrentTime:function(){
                        return Date.now();
                    }
                },
                //计算属性
                computed:{
                    getCurrentTime1:function(){
                        return Date.now();
                    }
                }
            })

Vue-cli

用于快速生成项目模板

下载node.js，下载地址
安装，一路next
验证，cmd, node -v, npm -v
镜像， npm config set registry https://registry.npm.taobao.org
下载， npm install vue-cli -g
验证， vue -V
如果安装失败，可以先卸载，再次安装最新版
还不行，执行 npm config list，查看prefix，找到vue.cmd安装目录，加入path环境变量中
进入对应路径下，执行 vue init webpack firstvue创建一个项目，跟着提示选择
进入创建的firstvue，执行 npm install
执行 npm run dev
浏览器输入打印的网址回车

• build和 config：WebPack 配置文件
• node_modules：用于存放 npm install 安装的依赖文件
• src： 项目源码目录
• static：静态资源文件
• .babelrc：Babel 配置文件，主要作用是将 ES6 转换为 ES5
• .editorconfig：编辑器配置
• eslintignore：需要忽略的语法检查配置文件
• .gitignore：git 忽略的配置文件
• .postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
• index.html：首页，仅作为模板页，实际开发时不使用
• package.json:项目的配置文件
• name：项目名称
• version：项目版本
• description：项目描述
• author：项目作者
• scripts：封装常用命令
• dependencies：生产环境依赖
• devDependencies：开发环境依赖

Webpack

一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

npm install webpack -g
npm install webpack-cli -g

webpack -v
webpack-cli -v

-webpack
--modules
-webpack.config.js

• entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
• output：输出， 指定WebPack把处理完成的文件放置到指定路径
• module：模块， 用于处理各种类型的文件
• plugins：插件， 如：热更新、代码重用等
• resolve：设置路径指向
• watch：监听， 用于设置文件改动后直接打包

main.js

var hello=require("./hello");
hello.sayHi();

hello.js

exports.sayHi=function(){
    document.write("Hello Webpack");
}

webpack.config.js

module.exports = {
    entry: "./modules/main.js",
    output: {
        path: "",
        filename: "./js/bundle.js"    ,
    },
    module: {
        loaders: [
            {test: /\.js$/,loader: ""}
        ]
    },
    plugins: {},
    resolve: {},
    watch: true
}

cmd进入webpack目录下执行 webpack

vue-router

官方的路由管理器

npm install vue-router --save-dev

不成功尝试 npm install --legacy-peer-deps vue-router@3.5.2

.html调用.js调用.vue

index.html

    myvue

main.js

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置

Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: ''
})

App.vue

    迪师傅

    首页
    内容页
    Kuang

export default {
  name: 'App',
  components: {
  }
}

#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;
}

Content.vue

  内容

    export default {
        name: "Content"
    }

router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
import Kuang from "../components/Kuang";

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/content',
      name: 'content',
      //跳转的组件
      component: Content
    },
    {
      //路由路径
      path: '/main',
      name: 'main',
      //跳转的组件
      component: Main
    },
    {
      //路由路径
      path: '/kuang',
      name: 'kuang',
      //跳转的组件
      component: Kuang
    }
  ]
})

Vue+Element

sass-loader版本退回7.3.1

Main.vue

  首页

    export default {
        name: "Main"
    }

Login.vue

      欢迎登录

        登录

      请输入账号和密码

        确 定

  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }

  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }

index.js

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

main.js

import Vue from 'vue'
import App from './App'
//扫描路由配置
import router from './router'
//导入elementUI
import ElementUI from "element-ui"
//导入element css
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router);
Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  render: h => h(App),//ElementUI规定这样使用
})

    login

export default {
  name: 'App',
}

路由嵌套

在之前的基础上新增和修改对应页面

Profile.vue

  个人信息

  export default {
    name: "UserProfile"
  }

List.vue

  用户列表

  export default {
    name: "UserList"
  }

Main.vue

            用户管理

                个人信息

                用户列表

            内容管理

              分类管理
              内容列表

              个人信息
              退出登录

  export default {
    name: "Main"
  }

  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }

index.js

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      //路由嵌套
      children: [
        {path: '/user/profile',component: UserProfile},
        {path: '/user/list',component: UserList}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

Original: https://www.cnblogs.com/LoginX/p/Login_X54.html
Author: 我没有bug
Title: 前端浅学之Vue