Vue学习笔记1—初识Vue

最新推荐文章于 2024-07-24 10:40:52 发布

卢严砖

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量217

点赞数 2

分类专栏： Vue 文章标签： Vue 前端

本文链接：https://blog.csdn.net/Hades____/article/details/90084947

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

初识Vue

前端的框架与库的区别

总的来说，框架就是提供了前段项目的整体解决方案；库就是自己组合来实现项目。
打比方来说，前端的库就像是我们平时家里用的工具箱，里面有起子、锤子等各种工具。我们可以通过这个工具箱来制造东西，甚至我们可以用工具箱自己制造一下工具，方便以后我们制造东西；而框架，就更像是我们在淘宝上买好的的玩具车的框架，回来后拼装完成，然后可以根据自己的需要，贴上不同的贴纸，喷上不同的颜色，但是和其他使用框架的人一样，我们拿到手上的玩具骨架是一样的，我们很难去改变玩具车的骨架。
框架与库之间的最本质的区别在于控制权：you call libs,frameworks call you(你控制库，框架控制你，控制反转)
前端的库与框架的定义：
- 库（jQuery、 art-template）：库更多是一个封装好的一个集合，提供给开发者使用，而且是特定于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；
  
  art-template ：用于前端开发时一个绑数据的模板，这款模板引擎的最主要特点是轻量级、代码简洁、好用，一个template.js大概才几kb左右。art-template支持标准语法和原始语法，标准语法允许模板更易于读写，而原始语法具有强大的逻辑处理能力。
  
  React和react-router, react-redux结合起来才叫框架，本身只是充当一个前端渲染的库而已，React就是纯粹写UI组件的没有什么异步处理机制、模块化、表单验证这些
- 框架（thinkPHP）：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套较为完整的解决方案，而且控制权在框架本身，使用者要找框架所规定的某种规范进行开机发。
现如今，客户要求越来越定制化，所以应当将框架与库结合运用，让他们以聚合的形式在我们所要开发的应用中使用：

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

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起步

引包，让其具备Vue对象；
通过new Vue(options) 来启动Vue；
配置options选择对象：

{

el : ‘目的地’,

template : ‘模板’,

data : {键 : 值},

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

};

（1.在template里面加入要多行的写入需要使用ES6的模板字符串符号 ‘`’ 将多行的字符串圈起来，而且写入的模板必须只有一个根节点；2.data里面也可以不用直接使用对象，而是通过函数的return返回数据对象）； 3.可以通过以下方法来创建对象的方法methodName : function() { code lines }
页面中要存在改目的地，目的地的字符串与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>

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

创建子组件（对象）：

var Son = {template : '模板', data : '数据', methods : '功能', components : '子组件们'} 或者是 var Son = Vue.extend({template : '模板', data : '数据', methods : '功能', components : '子组件们'})
在父组件中声明，根属性components : {'组件名' : '组件对象'}
在父组件中要用的地方使用<组件名></组件名>或者<组件名 />
- 在不同的框架中，有的不支持大写字母，所以使用时候组件名下划线命名法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>

父子组件传值（父传子）

父组件向子组件传值是在父组件用子组件的时候通过属性传递
子组件还要声明props : ['属性名']，来接收父组件传来的值
声明以后，就是子组件自己的值了，可以随便使用
- 在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
评论
Vue学习笔记1—初识Vue

初识Vue前端的框架与库的区别总的来说，框架就是提供了前段项目的整体解决方案；库就是自己组合来实现项目。打比方来说，前端的库就像是我们平时家里用的工具箱，里面有起子、锤子等各种工具。我们可以通过这个工具箱来制造东西，甚至我们可以用工具箱自己制造一下工具，方便以后我们制造东西；而框架，就更像是我们在淘宝上买好的的玩具车的框架，回来后拼装完成，然后可以根据自己的需要，贴上不同的贴纸，喷上...
复制链接

扫一扫