开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue入门(上) -> 正文阅读

[JavaScript知识库]Vue入门(上)

Vue入门(上)

Vue官网：https://cn.vuejs.org/，理论里面都有，我这大多只有实操代码哈

学习一样东西一定要会看官方教程或说明文档

vue入门学习

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。（来自百度百科）

Vue实现了AngularJS框架提出的前端程序模块化，用了MVVM设计模式，同时结合了Reactive.js的虚拟Dom技术，加上本身的特色——计算属性，成为了前端框架大哥。

1.MVVM 框架

M:model

数据层（存储数据及对数据的处理如增删改查）
V：view

视图层(UI用户界面)
VM： ViewModel

业务逻辑层（一切 js 可视为业务逻辑）,及时修改，及时编译，双向绑定了View层和Model层

v-model 双向绑定的演示

（1）引入vue.js

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

(2) html代码

<div id="app">
    <input type="text" v-model="message">{{message}}
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            message:'Hello Vue!'
        }
    });
</script>

（3）演示view的改变，导致model层的改变

在这里插入图片描述

2.vue的七大属性

el属性

用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性

用来设置模板，会替换页面元素，包括占位符。
methods属性

放置页面中的业务逻辑，js方法一般都放置在methods中
render属性

创建真正的Virtual Dom
computed属性

用来计算
watch属性

watch:function(new,old){}

监听data中数据的变化

两个参数，一个返回新值，一个返回旧值

3. vue的基本语法

3.1 v-if v-else-if v-else

<div id="app">
    <p v-if="message==='A'">A</p>
    <p v-else-if="message==='B'">B</p>
    <p v-else-if="message===C">C</p>
    <p v-else>Other</p>


</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            message:'D'
        }
    });
</script>

在这里插入图片描述

3.2 v-for

<div id="app">
    <ul>
        <li v-for="(item,index) in list">{{index}}:{{item}}</li>
    </ul>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            list:["A","B","C"]
        }
    });
</script>

在这里插入图片描述

3.2 vue绑定事件

v-on 绑定方法

<div id="app">
    <button  v-on:click="saiHai">Click ME</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:'Hello Vue!'
        },
        methods: {
            saiHai:function (event){
                // `event` 是原生 DOM 事件
                alert(this.message)
            }
        }
    })
</script>

在这里插入图片描述

v-model 双向绑定

(1) 绑定表单

<div id="app-input">
    性别： <input type="radio" value="男" v-model="sex">男 <input type="radio" value="女" v-model="sex">女 <br/>
    你选择了：{{sex}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app-input",
        data: {sex: ""}
    });
</script>


<div id="app-select">
    下拉框：
    <select v-model="selected">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select> {{selected}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app-select",
        data: {selected: "A"}
    });
</script>

在这里插入图片描述

v-bind 绑定数据（可以理解为单向绑定）

!--v-bind 绑定数据-->
<div id="app"><input v-bind:value=message type="text"/> {{message}}</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app", 
        data: {message: 'hello'}
    });
</script>

在这里插入图片描述

4. 组件化构建

4.1 组件化的概念

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。（图从Vue官网拿的）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGAYy71d-1627225503828)(https://cdn.jsdelivr.net/gh/bomingxu/picgo/image/20210623140713.png)]

4.2 构建一个简单的组件

<div id="app">
    <myconponent v-for="item in items" :project="item"></myconponent>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    Vue.component("myconponent",{
        props: ['project'], //!!!这里要加单引号            
        template: '<li>{{project}}</li>'
    })
    var vm = new Vue({
        el: "#app",
        data: {
            items: ["java", "vue", "linux"],
            message: 'hello'
        }
    });
</script>

在这里插入图片描述

5. axios 通讯（官网地址:http://www.axios-js.com/zh-cn/docs/）

由于vue是一个视图层框架，并且作为严格遵守SOC（关注度分离原则）所以vue.js并不包括ajax通信功能，为了解决通信问题，作者单独开发了一个名叫vue-resouce的插件，不过在进入2.0版本后停止了对该插件的维护，并推荐了Axois框架。少用jquery，因为操作dom过于频繁。

模拟数据 data.json

{
  "name": "ethan",
  "url": "www.baidu.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

html代码

<div id="app" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address.city}}</div>
    <a v-bind:href="info.url">click me</a></div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
    el: "#app",
        data: function () {
            return {
                info: {name: null, url: null, address: {street: null, city: null, country: null}}
            }
        },
    mounted() {
        axios.get('data.json')
            .then(response=>(this.info=response.data)); 
    }
    });
</script>
</body>

使用钩子函数mounted方法，在vue实例挂载的时候将json里的数据，加到示例的data函数的info属性中，利用mounted会将el替换成实例下的el的特性，把数据渲染到我们的app中
在这里插入图片描述

6. computed 计算属性

我们的vue对象中有一个属性，使用缓存来将不经常变化的属性的结果缓存，下一次可以不用重复，直接从内存中调取，节省系统的资源开销
注意事项：

methods computed不能重名，重名之后会有优先级问题，method优先级高

特性：

作用于缓存中，和mybatis十分相似,一旦内部有属性变化就会立刻刷新

<div id="app" v-clock> Now:{{getTime()}} Now2:{{getTime2}}</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>    var vm = new Vue({
    el: "#app", data: {message: '123'},
    methods: {
        getTime: function () {
            return Date.now();
        }
    },
    computed: {
        getTime2: function () {
            this.message;
            return Date.now();
        }
    }
});
</script>

在这里插入图片描述

7. 插槽

<div id="app">
    <to_do>
        <to_title slot="to_title" v-bind:title="title"></to_title>
        <to_items slot="to_items" v-for="item in todoItems" v-bind:item="item"></to_items>
    </to_do>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    Vue.component("to_do", {template: '<div>' + '<slot name="to_title"></slot>' + '<ul>' + '<slot name="to_items"></slot>' + '</ul>' + '</div>'});
    Vue.component("to_title", {props: ['title'], template: '<p>{{title}}</p>'});
    Vue.component("to_items", {props: ['item'], template: '<li>{{item}}</li>'});
var vm = new Vue({el: "#app", data: {title: '水果列表', todoItems: ['我是苹果', '我是香蕉']}});
</script>