Vue学习笔记1—初识Vue

初识Vue

前端的框架与库的区别

  • 总的来说,框架就是提供了前段项目的整体解决方案;库就是自己组合来实现项目。

  • 打比方来说,前端的库就像是我们平时家里用的工具箱,里面有起子、锤子等各种工具。我们可以通过这个工具箱来制造东西,甚至我们可以用工具箱自己制造一下工具,方便以后我们制造东西;而框架,就更像是我们在淘宝上买好的的玩具车的框架,回来后拼装完成,然后可以根据自己的需要,贴上不同的贴纸,喷上不同的颜色,但是和其他使用框架的人一样,我们拿到手上的玩具骨架是一样的,我们很难去改变玩具车的骨架。

  • 框架与库之间的最本质的区别在于控制权:you call libs,frameworks call you(你控制库,框架控制你,控制反转)

    img

  • 前端的库与框架的定义:

    • 库(jQuery、 art-template):库更多是一个封装好的一个集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权在使用者手中,在库中查询需要的功能在自己的应用中使用,我们可以从封装的角度理解库;

      art-template : 用于前端开发时一个绑数据的模板,这款模板引擎的最主要特点是轻量级、代码简洁、好用,一个template.js大概才几kb左右。art-template支持标准语法和原始语法,标准语法允许模板更易于读写,而原始语法具有强大的逻辑处理能力。

      React和react-router, react-redux结合起来才叫框架,本身只是充当一个前端渲染的库而已,React就是纯粹写UI组件的 没有什么异步处理机制、模块化、表单验证这些

    • 框架(thinkPHP):框架顾名思义就是一套架构,会基于自身的特点向用户提供一套较为完整的解决方案,而且控制权在框架本身,使用者要找框架所规定的某种规范进行开机发。

  • 现如今,客户要求越来越定制化,所以应当将框架与库结合运用,让他们以聚合的形式在我们所要开发的应用中使用:

    前端开发可以直接使用较为完整的框架(简易的DOM操作 + 发请求 + 模板引擎 + 路由功能),也可以使用多个库来开发(比如jQuery和art-template相结合),也可以在框架灵活应用库。

    img

Vue的文件介绍

  • npm下载的vue目录中,dist存放js文件:
    • vue.common.js CommonJS 模块化代码
    • vue.esm.brower.js
    • vue.esm.js ES6 模块化代码
    • vue.js 正常的代码(支持amd/commonJS/es6/umd)umd是前三个全部兼容
    • vue.min.js 压缩后的代码
    • vue.runtime.common.js
    • vue.runtime.esm.js
    • vue.runtime.js
    • vue.runtime.min.js 运行时的代码,比vue.js要小30%

JS中的模块规范(CommonJS,AMD,CMD),点击这个链接可以彻底弄懂CommonJS和AMD/CMD

**CommonJS: **一开始大家都认为JS是辣鸡,没什么用,官方定义的API只能构建基于浏览器的应用程序,CommonJS就按耐不住了,CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API,从而填补了这个空白。它的终极目标是提供一个类似Python,Ruby和Java标准库。这样的话,开发者可以使用CommonJS API编写应用程序,然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。

**AMD: **CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范。AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

**CMD: **大名远扬的玉伯写了seajs,就是遵循他提出的CMD规范,与AMD蛮相近的,不过用起来感觉更加方便些,最重要的是中文版,应有尽有:seajs官方doc

Vue起步

  1. 引包,让其具备Vue对象;

  2. 通过new Vue(options) 来启动Vue;

  3. 配置options选择对象:

    {

    el : ‘目的地’,

    template : ‘模板’,

    data : {键 : 值},

    methods : {方法名: function() {代码行}}

    };

    (1.在template里面加入要多行的写入需要使用ES6的模板字符串符号 ‘`’ 将多行的字符串圈起来,而且写入的模板必须只有一个根节点;2.data里面也可以不用直接使用对象,而是通过函数的return返回数据对象); 3.可以通过以下方法来创建对象的方法methodName : function() { code lines }

  4. 页面中要存在改目的地,目的地的字符串与jQuery一样;(在vue内部运行机制中,需要根据你传递的字符串进行判断,比如是#xxx、.xxx还是元素标签查找,所以写入document.getElementById(‘xxx’)更为优化,可以避免vue来进行判断)

<div id = 'app'></div>
<script src = 'vue.js'></script>
<script>
    new Vue({
        el : '#app',
        template : '<div><h1>hello world {{text}}</h1></div>'
        data : function(){
        return {
            text: '卢严砖'
        }
    }
    })
</script>

插值表达式

  • {{表达式}}
    • 对象(不可以连续三个大括号,要在第二个后面空一个空格,如:{{ {key : value} }});
    • 字符串 {{‘xxx’}};
    • 判断后的布尔值 {{ture}};
    • 三元表达式{{ture ? ‘正确’ : ‘错误’}}
  • 插值表达式可用于页面中简单粗暴的调试
  • 注意:插值表达式的表达式必须在data中申明过

Vue中常用的v-指令演示

  • v-text 只能在双标签中;其实就是给元素的innerText属性赋值
  • v-html 其实就是给元素的innerHTML属性赋值
  • v-if 判断是否插入这个元素;如果值为false,会留下一个<!---->作为标记,万一未来v-if的值是true了,就在这里插入元素,如果有if和else就不需要单独留坑了
  • v-else-if 与v-if和v-else一起用
  • v-else 与v-if连用
  • v-show 判断是否隐藏元素,如果确定要隐藏,会给元素的style加上display : none
<div id = 'app'></div>
    <script src = 'js/vue.min.js'></script>
    <script>
        new Vue({
            el : '#app',
            template : `<div>
                            <span v-text = 'myText'></span>
                            <hr />
                            <span v-html = 'myHtml'></span>
                            <hr />
                            <button v-if = 'isExit'>v-if alone</button>
                            <hr />
                            <button v-if = 'num == 1'>v-if</button>
                            <button v-else-if = 'num == 2'>v-else-if</button>
                            <button v-else >v-else</button>
                            <hr />
                            <button v-show = 'isShow'>v-show</button>
                        </div>`,
            data : {
                myText : '<h1>我是v-text的内容</h1>',
                myHtml : '<h1>我是v-html的内容</h1>',
                isExit : true,
                num : 1,
                isShow : false,
            }
        })
    </script>

v-bind的使用

  • 用来给元素的属性赋值:

    • 可以给已经存在的属性赋值
    • 也可以给自定义的属性赋值
  • 语法在元素上为:v-bind:属性名 = "常量||变量名"

  • 简写形式:属性名 = "变量||常量名"

    <div v-bind:属性名 = "变量"></div>
    <div :属性名 = "变量"></div>
    

v-on的使用

  • 用途:用于处理自定义原生事件,列入给按钮添加click事件
  • 语法在元素上为:v-on:原生事件名 = "给变量进行的操作||函数名"
  • 简写形式:@原生事件名 = "给变量进行的操作||函数名"
<div v-on:原生事件名 = "给变量进行的操作"></div>
<div @原生事件名 = "给变量进行的操作"></div>
<div id = 'app'></div>
<script src = 'js/vue.min.js'></script>
<script>
    new Vue({
        el : '#app',
        template : `<div>
                        <input type = 'text' v-bind:value = "myValue" :file = " '这是file属性的值' " />
                        <hr />
                        <button v-on:dblclick = "doubleClick('这是双击后提示框弹出的值')" @click = " myValue = '这是单击修改后的value属性的值' ">通过v-on绑定单击和双击事件</button>
                    </div>`,
        data : {
            myValue : '这是value属性的值',
        },
        methods: {
            doubleClick : function (message) {
                alert(message)
            }
        },
    })
</script>

在JS中双击的原生事件是dblclick();

该实例的v-on的原理是,单击了按钮后改变了vue内部的变量,然后vue会实时监控察觉到页面中使用的变量更改了,所以重新渲染了视图更改了部分。

v-model的使用

  • 用途:双向数据流的绑定
    • 页面改变影响内存(js)
    • 内存(js)改变影响页面
  • 语法在元素上为:v-model = "name"
<div id = 'app'></div>
<script src = 'js/vue.min.js'></script>
<script>
    new Vue({
        el : '#app',
        template : `<div>
                        <input type = 'text' v-model = "myValue" />输入xxxx
                        <hr />
                        <button v-if = " myValue == 'xxxx' ">当输入xxxx时,才会显示该按钮</button>
                    </div>`,
        data : {
            myValue : '这是value属性的值',
        },
        methods: {
        },
    })
</script>

v-bind和v-model的区别

  • v-bind可以给任何属性赋值,v-model只能给具备value属性的元素的value属性赋值;
  • v-bind是从vue到页面的单向数据流,而v-model是页面到vue,vue到页面的双向数据绑定。

v-for的使用

  • 基本语法
    • 数组的操作:v-for = "item in arr"
    • 对象的操作:v-for = "item in obj" item的值是对象中value对应的值
  • 如果是没有id
    • 数组操作为v-for = "(item, index) in arr" :class = "index"
    • 对象操作为v-for = "(value, key, index) in obj"
  • 数组和对象中v-for的属性顺序 (index属性可以用来设置奇偶行不同的样式,例如:class = " index%2==0?‘red’:‘green’ ")
    • 数组 item, index
    • 对象 value, key, index
<div id = "app"></div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el : "#app",
        template : `
        <div>
            <ul>
                <li v-for = "item in arr" :class = "item.myClass">
                    {{item.name}}
                </li>
            </ul>
            <hr />
            <ul>
                <li v-for = "(item, index) in arr">
                    {{index}}
                </li>
            </ul>
            <hr />
            <ul>
                <li v-for = "item in obj">
                    {{item}}
                </li>
            </ul>
            <hr />
            <ul>
                <li v-for = "(value, key, index) in obj">
                    value : {{value}}
                    key : {{key}}
                    index : {{index}}
                </li>
            </ul>
        </div>
        `,
        data : {
            arr : [{name : "张三", myClass : "张三"}, {name : "李四", myClass : "李四"}, {name : "王麻子", myClass : "王麻子"}],
            obj : {'A' : '张三', 'B' : '李四', 'C' : '王麻子'}
        }
    })
</script>

关于对象内的this

  • vue已经把以前this是window或者对象事件的问题搞定了
  • methods和data本身是在一个对象里的,所以在该对象中可以通过this随意的取
  • 方法:
    • 取data中的值 :this.xxx
    • 调用methods中的函数 :this.xxxMethod
<div id = "app"></div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el : "#app",
        template : `
        <div>
            <h1 v-show = 'isShow'>这是通过v-show指令显示的内容</h1>
            <hr />
            <button @click = 'changeIsShow'>点击按钮改变以上内容是否显示</button>
        </div>
        `,
        data : {
            isShow : true,
        } ,
        methods: {
            changeIsShow : function(){
                this.isShow = !this.isShow;
            }
        },
    })
</script>

渲染组件-父组件使用子组件

  1. 创建子组件(对象):

    var Son = {template : '模板', data : '数据', methods : '功能', components : '子组件们'} 或者是 var Son = Vue.extend({template : '模板', data : '数据', methods : '功能', components : '子组件们'})

  2. 在父组件中声明,根属性components : {'组件名' : '组件对象'}

  3. 在父组件中要用的地方使用<组件名></组件名>或者<组件名 />

    • 在不同的框架中,有的不支持大写字母,所以使用时候组件名下划线命名法my_header
  • 总结:

    存在子,声明子,使用子

<div id = 'app'></div>
<script src="js/vue.min.js"></script>
<script>

    var Son = {
        template : `
        <div>
            <h1>我是子组件</h1>
        </div>
        `
    }

    new Vue({
        el : '#app',
        template : `
        <div>
            <son></son>
        </div>
        `,
        data:{},
        components : {
            son : Son,
        }
    });
</script>

父子组件传值(父传子)

  1. 父组件向子组件传值是在父组件用子组件的时候通过属性传递
  2. 子组件还要声明props : ['属性名'],来接收父组件传来的值
  3. 声明以后,就是子组件自己的值了,可以随便使用
    • 在template中,直接使用属性名代表变量
    • 在js中通过‘this.属性名’使用
  • 总结

    父传子(属性),子声明(收),子直接用(就是自己的一样)

父子组件传值(子传父)

1.子组件向父组件传值直接使用子组件(对象)的data属性的里面的值就可以

Son.data.sonData

<div id = 'app'></div>
    <script src="js/vue.min.js"></script>
    <script>

        var Son = {
            template : `
            <div>
                <h1>{{title}}</h1>
            </div>
            `,
            props : ['title'],
            data : {
                sonData : '我是子组件向父组件传的值',
            }
        }

        new Vue({
            el : '#app',
            template : `
                <div>
                    <son :title = "xxx"></son>
                    <hr />
                    {{sond}}
                </div>
            `,
            data : {
                xxx : '我是父组件向子组件传的值',
                sond : Son.data.sonData, 
            },
            components : {
                son : Son,
            },
        })
    </script>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卢严砖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值