VUE学习

VUE入门教程

什么是VUE？

​ VUE是一套用于构建用户界面的渐进性框架，Vue被设计可以自底向上逐层应用，Vue只关注视图层。易上手。

MVVM模式的实现者

​ Model：模型层，在这里表现JavaScript对象

​ View：视图层，在这里表示DOM

​ ViewModel：连接视图和数据的中间件，能够观察到数据的变化，并对视图对应的内容进行更新；能够监听到视图的变化，并能够通知数据发生改变。

为什么要使用MVVM

主要目的是分离视图和模型

  • 低耦合
  • 可复用
  • 独立开发
  • 可测试

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    //View层
    <div class="app">{{message}}</div>

</body>
<script>
    var ve=new Vue({
        el: ".app",
        //model层 数据
        data:{
            message:"hello vue"
        }
    });

</script>
</html>

标签

v-bind

<body>
    <div class="app">
        <span v-bind:title="message">//鼠标悬停出现文字
        nihao</span>
    </div>

</body>
<script>
    var ve=new Vue({
        el: ".app",
        data:{
            message:"hello vue"
        }
    });

V-if

<body>
    <div id="app">
        <h1 v-if="type==='A'">A</h1>
        <h1 v-else-if="type=='B'">B</h1>
    </div>
</body>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            ok: true,
            type: "A"
        }
    })

</script>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-for="(item,index) in items">{{item.message}}{{index}}</h1>

</div>
</body>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            items: [
                {message: 'java'},
                {message: 'html'},
                {message: 'hadoop'}
            ]
        }
    })

</script>
</html>

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="sayhi">点击</button>

</div>
</body>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            message: "free"
        },
        methods: {  //方法必须定义再Vue的method对象中
            sayhi: function () {
                alert(this.message)
            }
        }
    })

</script>
</html>

双向绑定，组件

数据双向绑定，当数据发生变化的时候，视图也就跟着发生变化，当视图发生变化的时候，数据也跟同步变化

V-model
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    scannner<input type="text" v-model="message"/>
    {{message}}

</div>
     <select v-model="message">
        <option value=" " disabled>qinngxuanz</option>
        <option value="a" >a</option>
        <option value="b" >b</option>
        <option value="c">c</option>

    </select>
    <span>{{message}}</span>
</body>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            message: "free"
        }
    })

</script>
</html>

什么是组件conponent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <wangyun v-for="item in items" v-bind:wang="item"></wangyun>

    </div>


</body>
<script>
    Vue.component("wangyun",{
        props: ['wang'],
        template: '<li>{{wang}}<li>'
    })
    var vm=new Vue({
        el: "#app",
        data: {
            items: [
                "java","html","aini"
            ]
        }
    })
</script>
</html>

网络通信

什么是Axios

Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库(HTTP客户端)，用于浏览器和node.js中，API。

Vue的生命周期

Vue的实例有一个完整的生命周期，也就是从开始创建，初始化数据，编译模板，挂载DOM，渲染 更新 渲染 卸载称为Vue的生命周期。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<!--cloak解决闪烁问题-->
    <div id="app" v-cloak>
        {{info.name}}
    </div>
</body>
<script>
    var vm=new Vue({
        el: "#app",
        data(){
            return{
                info:{
                    name: null
                }
            }
        },
        mounted(){
            axios.get('data.json').then(Response=>this.info=Response.data)
        }
    })
</script>
</html>

计算属性

什么是计算属性？

是属性，简单来说就是可以将计算结果缓存起来的属性(将行为转化为静态的属性)

computed:

调用方法时，每次都需要进行计算，主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

内容分发

插槽

在vue中可以通过元素作为承载分发内容的出口。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>

</body>
<script>
    //插槽
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                    </div>'
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    })


    var vm=new Vue({
        el: "#app",
        data: {
            title: "hello,vue",
            todoItems: ['java','html','css']
        }
    })
</script>
</html>

自定义事件

image-20200731095259308

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item"
                    :index="index" v-on:remove="removeItem(index)" v-bind:key="index"></todo-items>
    </todo>
</div>

</body>
<script>
    //插槽
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                    </div>'
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props: ['item','index'],
        template: '<li>{{index}}{{item}} <button @click="remove">del</button></li>',
        methods:{
            remove: function (index) {
                //自定义事件分发
                this.$emit('remove',index)
            }
        }
    });


    var vm=new Vue({
        el: "#app",
        data: {
            title: "hello,vue",
            todoItems: ['java','html','css']
        },
        methods: {
            removeItem:function (index) {
                console.log("删除了"+this.todoItems[index]);
                this.todoItems.splice(index,1);

            }
        }
    })
</script>
</html>

Vue-cli

什么时Vue-cli

​ vue-cli官方提供了一个脚手架，用户快速生成一个vue的项目模板

作用：

  1. ​ 统一的目录结构
  2. 本地调试
  3. 热部署
  4. 单元测试
  5. 集成打包上线

需要node.js的环境

切换淘宝镜像源：npm install npm -g

下载模板包：cnpm install vue-cli

查看下载列表 npm list

image-20200731102613911

创建一个webpack 网站包

管理员身份运行cmd，进入目录，npm init webpack myvue

image-20200731102800208

image-20200731102831508

修复工具

image-20200731102849700

启动：

image-20200731102912627

输入localhost:8080

image-20200731102945321

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',  //静态资源文件夹
    assetsPublicPath: '/',        //
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // 端口号can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

什么是webpack

image-20200731104141846

​ webpack是一个模块打包器（module bundler），webpack视HTML，JS，CSS，图片等文件都是一种 资源 ，每个资源文件都是一个模块（module）文件，webpack就是根据每个模块文件之间的依赖关系将所有的模块打包（bundle）起来。

npm install webpack -g
npm install webpack-cli -g
配置

创建webpack.config.js配置文件

  • entry：入口文件，指定webpack用哪个文件作为项目的入口
  • output：输出，指定webpack把处理完的文件放在指定路径
  • module：模块，用于处理各种类型的文件
  • plugins：插件
  • resolve：设置路径指向
  • watch：监听，用于设置文件改动后直接打包
路由
cnpm install vue-router --save-dev

创建content main的两个组件

contend.vue
<template>
  <div>
    <h1>wangyun</h1>
  </div>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>

</style>


main.vue
<template>
  <div>
    <h1>wangyun</h1>
  </div>
</template>

<script>
    export default {
        name: "main"
    }
</script>

<style scoped>

</style>

安装路由，在src目录下，创建文件夹router,专门存放路由

import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'
// 导入上面定义的组件
import Content from '../components/Content'
import main from '../components/main'
import Wang from "../components/Wang";
// 安装路由
Vue.use(Router);
// 配置路由
export default new Router({
  routes: [
    {
      // 路由路径
      path: '/content',
      // 路由名称
      name: 'Content',
      // 跳转到组件
      component: Content
    }, {
      // 路由路径
      path: '/',
      // 路由名称
      name: 'main',
      // 跳转到组件
      component: main
    },{
      // 路由路径
      path: '/wang',
      // 路由名称
      name: 'wang',
      // 跳转到组件
      component: Wang
    }
  ]
});

在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/>'
});

在App.vue中使用路由

<template>
  <div id="app">
    <!--
      router-link： 默认会被渲染成一个 <a> 标签，to 属性为指定链接
      router-view： 用于渲染路由匹配到的组件
    -->
    <router-link to="/">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-link to="/wang">内容</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</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>

实战

  1. 创建一个名为hello-vue的项目。（需要管理员）
vue init webpack hello-vue
  1. 进入目录，输入
npm install vue-router --save-dev  //路由
  1. 创建element-ui
npm i element-ui -S
  1. 安装依赖
npm install
  1. 安装Sass加载器
cnpm install sass-loader node-sass --save-dev

解释：Npm命令解释：

  • npm install moduleName：安装模块到项目目录下
  • npm install -g moduleName：-g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置
  • npm install -save moduleName：–save 的意思是将模块安装到项目目录下，并在 package 文件的 dependencies 节点写入依赖，-S 为该命令的缩写
  • npm install -save-dev moduleName：–save-dev 的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖，-D 为该命令的缩写

image-20200731173309325

posted @ 2020-09-06 18:13  且I听  阅读(70)  评论(0)    收藏  举报