Vue入门(上)

2021/7/25 23:45:21

本文主要是介绍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入门(上)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程