Vue学习心得

发布时间:2023-02-08 13:30

Vue:一款渐进式JavaScript框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;

mvvm
●Model:模型层,在这里表示JavaScript对象
●View:视图层,在这里表示DOM (HTML操作的元素)
●ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者
在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者
●ViewModel能够观察到数据的变化,并对视图对应的内容进行更新
●ViewModel能够监听到视图的变化,并能够通知数据发生改变

MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大好处
●低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
●可复用:你可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
●独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
●可测试:界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

Vue.js是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是Vue.js的精髓之处了。核心是实现DOM监听与数据绑定

指令带有前缀v-

悬停显示信息
悬停

if判断

<div id="app">
    <h1 v-if="type==='A'">Ah1>
    <h1 v-else-if="type==='B'">Bh1>
    <h1 v-else>Noh1>
div>

for

<div id="app">
    <li v-for="text in allTexts">
        {{text.message}}牛
    li>
    <span v-bind:title="allTexts[0].message">悬停span>
div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            allTexts: [
                {message: "1"},
                {message: "2"},
                {message: "3"},
            ]
        }
    });
script>

v-on指令监听dom事件,绑定一个事件,简写为@

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

    <button v-on:click="greet()">点击button>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        //model:数据
        data:{
            message:"洛尘"
        },
        methods:{ //方法必须定义在Vue的Method对象中
            greet:function (){
                alert(this.message);
            }
        }
    });
script>

双向数据绑定
Vue.js是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

<div id="app">
    input the content:<input type="text" v-model="message"/>{{message}}
    <br>
    性别:
    <input type="radio" name="sex" value="man" v-model="luo"/><input type="radio" name="sex" value="woman" v-model="luo"/><p>yuo choose is {{luo}}p>
    <br>
        <select v-model="selected">
            <option value="" disabled>please chooseoption>
            <option>Aoption>
            <option>Boption>
            <option>Coption>
        select>
        <span style="color: aqua">selected:{{selected}}span>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        //model:数据
        data:{
            message: "洛尘,hello",
            luo: "",
            selected: ""
        }
    });
script>

Vue组件
组件是可复用的Vue实例,说白了就是一组可以重复使用的模板,跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:

<div id="app">

    <luo v-for="item in items" v-bind:i="item">luo>
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
    /*定义一个vue组件*/
    Vue.component("luo", {
        props: ['i'],
        template: '
  • {{i}}
  • '
    }); var vm = new Vue({ el:"#app", //model:数据 data:{ items:["java","linux","html"] } });
    script>

    Axios异步通信
    Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架,她的主要作用就是实现AJAX异步通信,其功能特点如下:
    ●从浏览器中创建XMLHttpRequests
    ●从node.js创建http请求
    ●支持Promise API [JS中链式编程]
    ●拦截请求和响应
    ●转换请求数据和响应数据
    ●取消请求
    ●自动转换JSON数据
    ●客户端支持防御XSRF (跨站请求伪造)

    <div id="vue" v-clock>
        <div>{{info.name}}div>
        <a v-bind:href="info.url">点我到百度链接a>
    div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js">script>
    <script>
        var vm = new Vue({
            el: "#vue",
            //和data: 不同 属性:vm
            data() {
                return {
                    info: {
                        name:null,
                        url:null,
                        adresss:null,
                    },
                }
            },
            mounted() {
                //钩子函数 链式编程 ES6新特性
                axios.get("../data.json").then(response => (this.info=response.data));  //../返回上一级
            }
        })
    script>
    
    data.json
    {
      "name": "luo",
      "age": "18",
      "sex": 1,
      "url":"https://www.baidu.com",
      "address": {
        "street": "缇香郡",
        "city": "宁波",
        "country": "中国"
      },
      "links": [
        {
          "name": "bilibili",
          "url": "https://www.bilibili.com"
        },
        {
          "name": "baidu",
          "url": "https://www.baidu.com"
        },
        {
          "name": "cqh video",
          "url": "https://www.4399.com"
        }
      ]
    }
    

    计算属性
    计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!

    <div id="app">
        <p>c1:{{getTime()}}p>
        <p>c2:{{getTime2}}p>
    div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                message: "hello luo"
            },
            methods: {
                getTime: function () {
                    return Date.now();
                }
            },
            //计算属性
            computed: { //计算属性 methods和computed方法不能重名,重名之后只会调用methods方法
                getTime2: function () {
                    this.message; //当message修改时,时间戳修改,相当于缓存
                    return Date.now();
                }
            }
        });
    script>
    

    在方法的值发生变化时,缓存会刷新
    调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;

    插槽
    使用元素作为承载分发内容的出口,称其为插槽,可以应用在组合组件的场景中;
    v:bind: 可以缩写为一个:
    v-on: 可以缩写为一个@

    自定义事件
    通过以上代码不难发现,数据项在Vue的实例中,但删除操作要在组件中完成,那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了,Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用this.$emit(‘自定义事件名’,参数)

    vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;
     预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;
    主要的功能:
     统一的目录结构
     本地调试
     热部署
     单元测试
     集成打包上线

    new Vue({
    el: ‘#app’,
    components: { App },
    template: ‘’
    })

    webpack

    vue-router
     Vue Router是Vue.js官方的路由管理器(路径跳转)。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
    嵌套的路由/视图表
    模块化的、基于组件的路由配置
    路由参数、查询、通配符
    基于Vue.js过渡系统的视图过渡效果
    细粒度的导航控制
    带有自动激活的CSS class的链接
    HTML5历史模式或hash模式,在IE9中自动降级
    自定义的滚动条行为

    安装vue-router
    npm install vue-router --save-dev
    安装完之后去node_modules路径看看是否有vue-router信息

    安装路由,在src目录下,新建一个文件夹 : router,专门存放路由
    index.js(默认配置文件都是这个名字)
    /**

    • vue router的配置
      */
      //导入vue和vu-router
      import Vue from ‘vue’
      import VueRouter from ‘vue-router’;
      //导入组件
      import Content from “…/components/Content”;
      import Main from “…/components/Main”;
      //安装路由
      Vue.use(VueRouter)

    ItVuer - 免责声明 - 关于我们 - 联系我们

    本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

    桂ICP备16001015号