Vue入门(上)

本文主要是介绍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>

在这里插入图片描述

源码地址：

https://gitee.com/EthanYYDS/vuexuexishang.git

这篇关于Vue入门(上)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript

Vue入门(上)

Vue入门(上)

vue入门学习

1.MVVM 框架

2.vue的七大属性

3. vue的基本语法

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

3.2 v-for

3.2 vue绑定事件

4. 组件化构建

4.1 组件化的概念

4.2 构建一个简单的组件

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

6. computed 计算属性

7. 插槽

源码地址：

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯