Vue

Vue

Soc:关注度分离原则

HTML+CSS+JS：视图：给用户看，刷新后台给的数据

网路通讯：axios

页面跳转：Vue-router

状态管理：Vuex

Vue-UI:ice，element

MVVM: modle,view,viewmodle

判断-循环

  • if

    <!--view层-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>




<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            type: 'A'
        }
    });
</script>

  • for

    <!--view层-->
<div id="app">
    <p v-for="(item,index) in itmes">
        {{item.message}}--{{index}}
    </p>
</div>




<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            itmes: [
                {message: "你好"},
                {message: "拜拜"}
            ]
        }
    });
</script>

事件

  • no

    <!--view层-->
<div id="app">
    <!--绑定事件v-on:-->
    <button v-on:click="sayHi">click Me</button>
</div>




<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "你好，拜拜",
        },
        methods: {//vue的方法必须定义在methods对象中
            sayHi: function () {
                alert(this.message);
            }
        }
    });
</script>

v-modle:监听数据，改变数据

<!--view层-->
<div id="app">
    <!--改变数据  v-modle:监听数据，并改变数据-->
    <!--<textarea cols="30" rows="10" v-model="message"></textarea>-->
    <!--{{message}}-->
    <!--请输入：<input type="text" v-model="message"> {{message}}-->
    <!--性别：-->
    <!--<input type="radio" value="小明" v-model="message">男-->
    <!--<input type="radio" value="小红" v-model="message">女-->
    <!--<p>-->
    <!--选择了谁：{{message}}-->
    <!--</p>-->
    下拉框：
    <select v-model="message">
        <option disabled value="">--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>
        value:{{message}}
    </p>
</div>




<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    var vm = new Vue({
        el: "#app",
       data: {
            message: ""
       }
    });
</script>

Vue.component：组件

<!--view层-->
<div id="app">

    <fly v-for="item in items" v-bind:fan="item"></fly>


</div>




<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    // 定义一个Vue组件component模板
    Vue.component("fly",{
        //组件：传递给组件的值：props:参数
        props: ['fan'],
        template: '<li>{{fan}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            items: ["Java","Lunix","前端"]
        }
    });
</script>

网络通信

  • JQuery.AJAX

  • axios

        <!--解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-clock>
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">点击</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',

        data() {
            return {
                info: {
                    name: null,
                    url: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        mounted(){//钩子函数  链式编程 ES6新特性
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>

计算属性：计算出的结果，保存在属性中，在内存中运行

<!--view层-->
<div id="app">
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>




<!--导入 Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello fly"
        },
        methods: {
            currentTime1: function () {
                return Date.now();//返回一个事件戳
            }
        },
        computed: {//计算属性  methods的优先级大于computed
            currentTime2: function () {
                this.message; //mybatis
                return Date.now();//返回一个事件戳
            }
        }
    });
</script>

参数传递：props,v-bind

安装vue-cli

  1. 下载node.js

  2. 下载vue-cli

    npm install @vue/cli -g

  3. 创建一个vue项目，先进入你想创建项目的目录

    vue create(项目名)

  4. 运行vue项目

    cd 你的项目名称
vue run serve

安装webpack

  1. npm install webpack -g

  2. npm install webpack-cli -g

  3. 用IDEA打开项目

  4. 在根目录下创建modules

  5. 在modules目录下创建js文件

    //暴露一个方法
exports.sayHi = function () {
        document.write("<h1>狂神说ES6</h1>");
}

    //接收方法
var hello = require("./hello");
hello.sayHi();

  6. 在根目录下创建webpack.config.js

    module.exports = {
    //入口
    entry: './modules/main.js',
    //打印
    output: {
        filename: "./js/bundle.js"
    }
};

  7. 在Terminal中打包

    webpack

  8. 在html文件中引用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--前端模块化开发-->
<script src="dist/js/bundle.js"></script>

</body>
</html>

Concepts:

Entry: 入口文件，指定Webpack用哪个文件作为项目的入口

Output: 输出，指定Webpack把处理完成的文件放置到指定路径

Loaders: 开箱即用，webpack只能理解JavaScript和JSON文件。加载器允许 webpack 处理其他类型的文件，并将它们转换为有效的模块。

Plugins: 插件，如：热更新，代码重用等

Mode: 模块，用于处理各种类型的文件

resolve: 设置路径指向

watch: 监听，用于设置文件改动后直接打包

vue-router

  1. 在项目下添加路由

    npm add router

  2. 重新下载依赖

    nmp i

  3. 在src目录下创建router文件，并在给文件下创建index.js文件，将路由配置放在这里

    import Vue from 'vue' //导入vue
import VueRouter from 'vue-router' //导入路由

//声明显示路由，安装路由
Vue.use(VueRouter)

//创建一个对象routers
const routes = [
  {
    path: '/home',  //路由路径
    name: 'Home',
    component: () => import('../views/Home.vue')  //跳转的组件
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },{
    path: '*',
    component: () => import('../views/NotFound')
  }
]

//创建一个对象router
const router = new VueRouter({
  mode: 'history',  //路由模式
  base: process.env.BASE_URL,
  //配置导出routes接口
  routes
})

//暴露router接口
export default router

  4. 在main.js导入路由接口

    import Vue from 'vue'
import App from './App.vue'
//导入路由接口
import router from './router'

Vue.config.productionTip = false

new Vue({
  //配置路由
  router,
  render: h => h(App)
}).$mount('#app')

  5. 基本使用

    <template>
  <div id="app">
    <div id="nav">
        //路由路径绑定
      <router-link to="/home">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
      //显示路由
    <router-view/>
  </div>
</template>

  6. 参数传递

    //路由跳转
this.$router.push({
  path: '/Singer_profile',
  query: {
    dataObj: id
  }
});

//参数接收
profile(){
                this.singer=this.$route.query.dataObj;
                // console.log(this.singer)
            },

  7. 子路由，重定向

    {
    path: '*',
	redirect: to => {
	//方法接收，目标路由 作为参数
	//return 重定向的 字符串路径、路径对象
},
    component: () => import('../views/NotFound')
    	children: [{
		
}]
  }

  8. 路由传参

    //参数传递，先在vue视图层引用路由,传参需要绑定事件
<router-link :to="{name: '属性名',prams: {id: 1}}">
<\router-link>
    
//参数接收，在路由上接收参数
const router =new VueRouter({
    routes: [
        {
            path: '/*/: id', //路由路径
            name: '', //路由属性名
            componment: () => import(''),//导入路由组件
            props: true
        }
    ]
})

//在路由界面显示传入的参数
{{$route.prams.id}}

//显示路由界面
<router-view/>

引入一个组件要在main.js中导入

钩子函数

beforeRuuterEnter:(to,from,next)=>{
	console.log("进入路由之前");
	next();
},
beforeRouterLeave:(to,from,next)=>{
	console.log("进入路由之")后;
	next();
}

参数说明：

  • to: 路由将要跳转的路径信息
  • from：路径跳转前的路径信息
  • next：路由的控制参数
    • next（）跳入下一个页面
    • next（'/path'）改变路由的跳转方向，使其跳到另一个路由
    • next（false）返回原来的页面
    • next（（vm）=>{}）仅在beforeRouteEnter中可用，vm是组件实例
posted @ 2021-12-20 22:44  技术人员小饭  阅读(16)  评论(0)    收藏  举报