Vue 笔记(vue2)

Vue是一套构建用户界面的渐进式JavaScript框架，被设计为自底向上逐层应用，Vue核心库只关心视图层（Soc原则关注点分离）

CSS预处理器：用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的css文件，以供项目使用
常用的CSS预处理器有哪些

SASS：基于Ruby：通过服务器处理，功能强大，解析效率高。上手难度高于LESS。
LESS：基于NodeJS，通过客户端处理，使用简单，功能比SASS简单，解析也效率也低于SASS。后台人员需要的话，建议使用LESS。

TypeScript 微软标准微软开发的自由和开源的编程语言。很多浏览器不能直接支持TypeScript语法，需要编译后（编译成JS）才能被浏览器正确支持

JavaScript框架

Jquery 有点事简化了Dom操作，缺点是Dom操作台频繁，影响前端性能
Augular：Google收购的前端框架，特点是讲后台的MVC模式搬到前端，增加了模块化开发的理念，采用TypeScript语法开发。
React：facebook开发，高性能JS，提出虚拟dom，减少真实DOM操作，需要额外学习一门JSX语言。
Vue：一款渐进性，结合了Augular模块化和React虚拟DOM的优点
Axios:前端通信工具

UI框架

Ant-Design：阿里巴巴出品，基于React的UI版本
ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
Bootstrap：Twitter推出的前端开源工具包
AmazeUI：一款HTML5跨屏前端框架
JavaScript 构建工具
Babel：JS编译工具，主要用于浏览器不支持ES新特性，比如编译TypeScript
WebPack：模块打包器，主要作用是打包、压缩、合并及按顺序加载

MVVM （View ViewModel Model）软件架构设计模式

第一个Vue程序

引入依赖

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

第一个html Vue程序

<body>
    <div id="app">
        {
   
   {message}}
    </div>

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

Vue基本语法

1.我们也可以使用v-bind来绑定

<div id="app2">
        <span v-bind:title="message">
            鼠标放此处停留一段时间
        </span>
</div>
<script>
     var vm2 =new Vue({
        el:"#app2",
        data:{
            message:"这是一份隐藏信息"
        }
    })
</script>

2.判断（v-if / v-else）

<div id="app3">
        <div v-if="ok">OK</div>
        <div v-else="ok">No</div>
        <div v-if="message==='Vue'">这就是Vue</div>
        <div v-else="message==='Vue'">这就不是Vue</div>
    </div>
<script>
   var vm3 =new Vue({
        el:"#app3",
        data:{
            ok:true,
            message:"Vue"
        }
    })

</script>

3.循环 v-for

扫描二维码关注公众号，回复： 14764995 查看本文章

  <div id="app4">
        <li v-for="item in items">
            {
   
   {item.message}}
        </li>
    </div>
<script>
  var vm4=new Vue({
        el:"#app4",
        data:{
            items: [
                {message:"快乐"},
                {message:"伤心"},
                {message:"郁闷"}

            ]
        }
    })
</script>

也可以稍加修改

 <div id="app4">
        <li v-for="(item,index) in items">
            {
   
   {item.message}} 第{
   
   {index}}个
        </li>
    </div>

输出结果：
在这里插入图片描述
4.事件 v-on

<div id="app5">
        <button v-on:click="onclick">点我</button>
    </div>
<script>
 var vm5=new Vue({
        el:"#app5",
        methods:{
            onclick: function () {
                alert("执行了一个方法！");
            }
        }
    })
</script>

Vue:双向绑定 v-model

例子1

  <div id="app6">
        请输入内容<input type="text" v-model="message"> 内容是：{
   
   {message}}
    </div>
    <script>
        var vm6=new Vue({
        el:"#app6",
        data:{
            message:"123"
        }
    })
</script>

例子2

<div id="app7">
        性别: <input type="radio" name="sex" value="男" v-model="sex">男
        <input type="radio" name="sex" value="女" v-model="sex">女
        <p>你选中了{
   
   {sex}}</p>
    </div>
<script>
var vm7=new Vue({
        el:"#app7",
        data:{
            sex:'女'
        }
    })

Vue组件

一个简单的组件 Vue.component

    <div id="app8">
        <brills></brills>
    </div>
<script>
    <!--定义一个组件-->
    Vue.component("brills",{
        template:'  <li>姓名:brills</li>'
    })
    var vm8=new Vue({
        el:"#app8"
    })
</script>

使用props属性传递参数

    <div id="app9">
        <brills v-for="item in message" v-bind:value="item"></brills>
    </div>
    <script>
        Vue.component("brills",{
            props:['value'],
            template:"<li>hello{
   
   {value}}</li>"
        })
        var vm9=new Vue({
            el:"#app9",
            data:{
                message: ["我是小猪佩奇","我是卢本伟","我是一只小团团","芜湖！我是大司马"]
            }
        })
    </script>

Axios异步通信

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1. 钩子函数 mounted()

 <div id="app10">
        <div v-for="item in info.message" >
            <div style="background:red;" v-bind:title="item['time']">{
   
   {item["id"]}}</div>
            <div style="background:blue;" v-bind:title="item['time']">{
   
   {item["value"]}}</div>
        </div>
    </div>
    <script>
      var vm10=new Vue({
            el: "#app10",
            data() {//请求返回参数
                return {
                    info: []
                }
                },
             mounted(){
                    axios.get('./data.json').then(response => (console.log(this.info = response.data)))
                }

        })
    </script>

效果展示：
在这里插入图片描述

计算属性 computed

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

<div id="app11">
        {
   
   {currentTime}}
    </div>
     <script>
       var vm11=new Vue({
            el:"#app11",
            computed:{
                currentTime:function (){
                    return Date.now();
                }
            }
        })
    </script>

插槽slot

普通插槽
…
表具插槽

<div id="app12">
        <todo>
            <todo-title slot="todo-title" v-bind:title="title"></todo-title>
            <todo-items slot="todo-items" v-for="item in items" v-bind:item="item"></todo-items>
        </todo>
    </div>
    <script>
    //插槽slot
        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:"<p>{
   
   {title}}</p>"
        })
        Vue.component("todo-items",{
            props:['item'],
            template:"<li>{
   
   {item}}</li>"
        })
        var vm12 = new Vue({
            el:"#app12",
            data:{
                title:"大家晚上好吖",
                items:["你们好","我也好","大家都挺好"]
            }
        })

    </script>

在这里插入图片描述

自定义事件内容分发

 <div id="app13">
        <fruitlist v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeitem(index)">{
   
   {item}}</fruitlist>
    </div>
    <script>
      Vue.component("fruitlist",{
            props:["index","item"],
            template:"    <li>{
   
   {index}}---{
   
   {item}} <button v-on:click='remove'>删除</button></li>",
            methods:{
                remove:function (index){
                    console.log(index)
                    this.$emit('remove',index)
                }
            }
        })
        var vm13 = new Vue({
            el:"#app13",
            data:{
                items:["香蕉","菠萝","黄瓜","苹果"]
            },
           methods: {
                removeitem :function (index){
                    console.log("删除了"+this.items[index])
                    this.items.splice(index,1)
                }
           }
        })
    </script>

Vue-cli(脚手架)

1.安装Node.js

http://nodejs.cn/download/

2.安装git

https://git-scm.com/download/win

3.安装淘宝Nodejs镜像加速

npm install cnpm -g

安装路径

C:\Users\q3271\AppData\Roaming\npm

4.安装vue-cli

cnpm install vue-cli -g

vue项目
1.执行cmd vue初始化

vue init webpack [项目名称]

2.安装依赖环境

npm install
npm run dev

webpack

webpack是一款模块加载器兼打包工具
export导出，import导入

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

配置

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

暴露一个方法和引用
创建一个hello.js文件

exports.sayHi = function(){
    document.write("<h1>ni</h1>>")
}

在main.js文件末尾添加

var hello = require(“./hello”)
hello.sayHi()

vue-router

1.当前项目安装

npm install vue-router --save-dev

import VueRouter from 'vue-router'
import Vue from 'vue'

//显示声明使用VueRouter
Vue.use(VueRouter)

axios

npm install --save axios vue-axios

vue-router使用

在src目录下创建router文件夹内创建index.js

import {createRouter,createWebHashHistory} from "vue-router";

import ConTent from "@/components/ConTent";
import Main from "@/components/Main";


//配置导出路由
const routes = [
    {
        path:'/content',
        component:ConTent
    },
    {
        path: '/main',
        component: Main
    }
]
const router =createRouter({
    history:createWebHashHistory(),
    routes
})

export default router

在main.js中导入配置


import App from './App.vue'
import router from './router'
import { createApp } from 'vue'



createApp(App).use(router).mount('#app')

修改App.vue界面

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <router-link to="/main">内容页</router-link>
  <router-link to="/content">主页</router-link>
<router-view></router-view>
</template>

<script>


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

  }
}
</script>

elementUI

安装

# NPM
$ npm install element-plus --save

自动导入
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

在main.js中引入

import App from './App.vue'
import router from './router'
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


createApp(App).use(router).use(ElementPlus).mount('#app')

嵌套路由

 {
        path: '/main',
        component: Main,
        children:[
            {path:"/login",component:LoginView },
            {path: '/popalert',component: PopAlert}
        ]
    }

传递参数

  <router-link to="/content/3">跳转</router-link>

设置路由

{
        path:'/content/:id',
        component:ConTent,
        props:true
    }

修改页面

<template>
 <h1>中间内容{
   
   {id}}</h1>

</template>

<script>
export default {
  name: "ConTent",
  props:['id']
}
</script>

重定向

 {
        path: '/home',
        redirect:'/main'
    }