一 Voe概念

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

只关注视图层.

作者是尤雨溪

SOC 关注分离原则 --前后端分离

wabpack 主要来对前端进行打包相当于后端的maven

mvc 同步通信为主

mvp 异步通信为主

mvvm 异步通信为主

vue的七大内置对象

el data methods

vue核心就是实现mvvm的实现者,他的核心就是实现DOM监听与数据绑定

二 Voe核心的原理

Vue的核心思想为数据驱动和组件化

1、数据驱动——双向绑定

Vue是一种MVVM框架。而DOM是数据的一个种自然映射。传统的模式是通过Ajax请求从model请求数据，然后手动的触发DOM传入数据修改页面。Vue中，Directives对view进行了封装，当model里的数据发生变化是，Vue就会通过Directives指令去修改DOM。同时也通过DOM Listener实现对视图view的监听，当DOM改变时，就会被监听到，实现model的改变，实现数据的双向绑定。

MVVM1

当然vuejs不可能是这样简单暴力的实现方式，vuejs是通过在实现一个观察者来实现的数据驱动。

MVVM

参考：深入响应式原理

2、组件化

在 Vue 当中，组件被当作是一等公民，所以设计和完成一个 Web App 之前，最好先构思好如何构建各个组件，哪些组建需要被复用到，哪些页面是要切换的。在组件化和模块化的原则上，Vue 提供了一些现有流行的预编译工具的扩展，管理 vue 可预编译文件。分别是 Webpack 派的 vue-loader和 Gulp 派的 vueify。

Vue 希望每个单页应用都可以通过组建系统简化为各个 component。

组件化实现了扩展HTML元素，封装可用的代码。页面上每个独立的可视/可交互区域视为一个组件；每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护；页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

三详细语法内容 eg

1：入门Voe第一个页面

v-bind:title 绑定一个元素

data:数据

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body><!-- view 视图-->
<!--<div id="title"><h1>{{message}}</h1></div>-->  <!--绑定一个元素-->
<span id="title" v-bind:title="message">悬浮显示新的东西</span>
<script  src="vue.min.js"></script>
<script>
    var vr = new Vue({
        el: "#title",
        //model 数据
        data: {
            message: "我是标题"
        }
    });
</script>
</body>
</html>

2：Voe的v-if，v-else-if，v-else语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 v-if="type==='A'">OKA</h1>
    <h1 v-else-if="type==='B'">OKB</h1>
    <h1 v-else>OKC</h1>
</div>
<script  src="vue.min.js"></script>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            type:'A'
        }
    });
</script>
</body>
</html>

错误点：js的格式必须为 --也可以写远程网站的

<script  src="vue.min.js"></script>

错误写法（"害我查错半小时”）

<script  src="vue.min.js"/>

3：Voe的v-for用法 eg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}----{{index}}
    </li>
</div>
<script src="vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            items:[
                {message:'金州拉文'},
                {message:'金州拉文SC'}
            ]
        }

    });

</script>
</body>
</html>

4：Voe中绑定事件 method

v-on 绑定事件的指令

click ....

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="sayHi">点击有惊喜</button>
</div>
<script src="vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "惊喜就是你"
        },
        methods: {
            sayHi: function () {
                alert(this.message)
            }
        }
    });


</script>
</body>
</html>

5:Voe双向绑定 eg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<input type="radio" name="sex " v-model="message" value="男">男
     <input type="radio" name="sex" v-model="message" value="女">男-->
 <!--   <textarea rows="20" cols="100" placeholder="请输入备注" v-model="message"></textarea>
    <br>-->
    <select v-model="message">
       <option disabled="disabled" value="" >--请选择--</option>
        <option>北京</option>
        <option>广东</option>
        <option>上海</option>
    </select>
    信息是{{message}}
    <!-- 请输出文本<input type="text" v-model="message">{{message}}-->
</div>
<script src="vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }


    });

</script>
</body>
</html>

关键词 v-model

6:定义一个组件 v-comment eg

我是这样理解的:props相当于形参,v-bind:绑定props的形参,后面是用来接受items的变量.item相当于实参,template相当于用形参取出真实的数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>voe组件</title>
</head>
<body>
<!--voe模板-->
<div id="app">
    <!--组件,传递给组件中的值:props   -->
    <!--组件相当于一个函数，v-bind相当于给这个组件传递个参数value是形参 item是实参-->
    <sx v-for="item in items" v-bind:value="item"></sx>
</div>
<!--引入voe的js-->
<script src="vue.min.js"></script>
<script>
    //创建一个组件component
    Vue.component("sx", {
        props: ['value'],
        template: '<li>{{value}}</li>'
    });
    var vm = new Vue(
        {
            el: "#app",
            data: {
                items: ["Java", "Linux", "前端"]
            }
        }
    );
</script>
</body>
</html>

7:axios异步通信 eg

· json数据

{
  "name":"狂神说java",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

注意：这里data(){}应该没有意义，直接data:{}就可以，但里面一定有一个原始参数info，然后axios获取到的数据绑定到info上

<!DOCTYPE html>
<html lang="en" xmlns:v-blend="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.links.name}}</div>
    <a v-bind:href="info.url">点我有惊喜</a>
    <a v-bind:href="info.links[1].url">点我有惊喜</a>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script type="text/javascript">
    var vr = new Vue({
        el: "#vue",
        data() {
            return {
                info: {}
            }
        },
        mounted() { //钩子函数
            axios.get("../data.json").then(response => (this.info = response.data))
        }
    });
</script>
</body>
</html>

mounted() 钩子函数

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div>{{info.name}}</div>
    <div>{{info.url}}</div>
    <div>{{info.address.street}}</div>
   <a v-bind:href="info.links[0].url">点我</a>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                info: {}
            }
        },
        mounted() {
            axios.get("data.json").then(response => (this.info = response.data))
        }
    });
</script>
</html>

8：计算属性缓存 vs 方法

作用就是让函数不重复调用浪费资源放到计算属性缓存中.

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

<body>
<div id="vue">
    <p>createTime1  {{createTime1()}}</p>
    <p>createTime2  {{createTime2}}</p>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
    var vr=new Vue({
        el:"#vue",
       data:{
            message:"你还sx"
       },
        methods:{
            createTime1:function () {
                return Date.now();   //返回一个时间
            }
        },
        computed:{   //计算属性:methods,computed 方法不能重名，重名之后之会调用methods的方法
            createTime2:function () {
                this.message;
                return Date.now();
            }
        }
    });

</script>
</body>
</html>

当message属性变值刷新缓存不然就一直不变

9 插槽

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <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>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>
    Vue.component('todo', {
        template: '<div>\
    <slot name="todo-title"></slot>\
    <ul>\
     <slot name="todo-items"></slot>\
    </ul>\
    </div>'
    });
    Vue.component("todo-title", {
        template: '<div>{{title}}</div>',
        props: ['title']
    });
    Vue.component("todo-items", {
        template: '<li>{{item}}</li>',
        props: ['item']
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: "这就是个标题",
            items: [
                '二级Java', '二级Linux', '二级Php'
            ]
        }
    });
</script>
</html>

10. 自定义事件分发

bind:绑定前端与vue的数据。props:绑定前端与组件的数据。
this.$emit将事件分发回前端，前端v–on:remove再将事件给removeItems(处理)
而:key则是将index返回到vue事例
前端，vue实例，组件，三大模块

第一个vue项目

import HelloWorld from './components/HelloWorld'  导入
export default           导出

安装webpack

npm install webpack -g
npm install webpack-cli -g
webpack -v
webpack-cli -v
webpack --watch 类似于热部署

写完js
然后 webpack 进行打包

为什么要这样做呢？传统的开发，所有东西都是一块加载，很大可能宕机。但是模块化一旦使用，分开加载，各位学废了吗

vue-router 路由

npm install vue-router --save-dev
安装

编写Content和Main组件内容并且在index路由配置进行路径绑定，然后main主程序入口导入并申明使用，最后在App组件嵌套两个路由便签，就是刚才绑定的好的两个路径，就完成了 

类比总结一下：一个vue组件相当于一个servlet，路由相当于去web.xml文件中注册servlet

element ui

安装环境

npm install vue-router --save-dev
    npm i element-ui s  安装element ui
npm install 安装所以依赖
cnpm install sass-loader node-sass --save-dev  # 安装sass
# 启动测试
npm run dev

路由嵌套

end

作者：金州拉文（联系作者）

发表时间：2020-11-01 17:12

转载声明：如果是转载栈主转载的文章，请附上原文链接

公众号转载：请在文末添加作者公众号二维码（公众号二维码见右边，欢迎关注）

Vue相关笔记

一 Voe概念

二 Voe核心的原理

1、数据驱动——双向绑定

2、组件化

三详细语法内容 eg

1：入门Voe第一个页面

2：Voe的v-if，v-else-if，v-else语法

3：Voe的v-for用法 eg

4：Voe中绑定事件 method

5:Voe双向绑定 eg

6:定义一个组件 v-comment eg

7:axios异步通信 eg

8：计算属性缓存 vs 方法

9 插槽

10. 自定义事件分发

第一个vue项目

安装webpack

vue-router 路由

element ui

路由嵌套

评论

Vue相关笔记

一 Voe概念

二 Voe核心的原理

1、数据驱动——双向绑定

2、组件化

三 详细语法内容 eg

1：入门Voe第一个页面

2：Voe的v-if，v-else-if，v-else语法

3：Voe的v-for用法 eg

4：Voe中绑定事件 method

5:Voe双向绑定 eg

6:定义一个组件 v-comment eg

7:axios异步通信 eg

8：计算属性缓存 vs 方法

9 插槽

10. 自定义事件分发

第一个vue项目

安装webpack

vue-router 路由

element ui

路由嵌套

评论

三详细语法内容 eg