学习vue第一天

最新推荐文章于 2021-01-13 16:39:40 发布

wkj_1996

最新推荐文章于 2021-01-13 16:39:40 发布

阅读量156

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/wkj_1996/article/details/101038619

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue基础笔记一

一、当我们通过script标签对引入Vue.js之后，我们会得到一个全局变量 Vue（直接挂在window身上）。

二、查看Vue源代码总结：

1.是通过匿名函数封装的，格式：（ function ( arg1,arg2) {}）（ a,b ）；

2.好处：1. 安全性要高2. 自调用3. 解决了命令冲突。

3.源代码封装的大致原理：

(function ( global,factory) {
                global.Yyb = factory
            })( this, function ( options ) {
                function Vue ( options ) {
                    this.name = options.name
                    this._init()
                }
                function _init () {
                    Vue.prototype.age = 18
                    Vue.prototype.id = 10
                }
                return  Vue
            })

4.前端模块化：
4.1 AMD
- 定义模块 define关键字
- 模块引入 require
4.2 CMD
- 定义模块 define关键字
- 模块引入 require
4.3 Common.js
- 导出 module.exports
- 引入require

5.Vue使用方式有两种
- script标签对引入
- npm安装
- 实现 - amd

三`

<body>
    <!-- 为什么id叫做app，  app是 application 的简写， application 应用 -->
    <div id="app">
        <!-- 这里面是vm的作用范围 -->
        <!-- 数据展示 -->
        <!-- 我们想要在html结构中书写js,那么就需要模板语法： vue提供了mustache ,双大括号语法 -->
        <p> {{ this.$data.info }} </p>
        <p> {{ this._data.info }} </p>
        <p> {{ this.info }} </p>
        <p> {{ info }} </p>
    </div>
    <div id="app1">
        <!-- 这里是VM1的作用范围 -->
    </div>
</body>
<script src= "../../lib/vue.js"></script>
<script>    
    
    // new Vue( options ) options 称之为配置， 配置的属性和方法 ， 它是一个对象

    var vm = new Vue({
        el: '#app', //官方称呼： ‘挂载’   element简写，它的作用是选取一个已有的DOM作为Vue实例的作用范围
        data: { //数据
            /* 
                data选项中定义的数据相当于全局变量，在app模板中相当于全局变量，可以直接使用
            */
            info: 'Hello Vue'
        }
    })

    console.log( vm )
  
    var vm1 = new Vue({
        el: '#app1'
    })

</script>

四、mustache语法

语法支持度:
- 研究它对js语法、数据类型的支持度
- 语法
- 流程控制
- 条件判断
- 循环
- 三目运算符
- 数据类型
- 经过输出我们发现数据类型可行
2. 写法
- 内容：我们要加 {{}}
- 属性：我们不加 {{}}
- 属性要想使用，我们必须依靠一个知识点：指令

五、指令是啥？为什么要有指令这个概念？

	帮助你理解： 
        2014年Vue1.0x问世，它借鉴了当前热火的angular的一个概念： 指令
        指令是用来操作DOM的
        指令其实就是封装的函数，这个函数绑定在元素身上， 那么久可以获取元素，然后就可以操作这个元素了

    Vue也是MVC的衍生框架，所以你采用类似的方案

    但是属性可以随意定义,但是我们希望我们添加的属性有vue标识，所以vue给它自定义的属性加了一个表示
    这个标识就是 v-

六、指令

v-html: 非转义输出： 将xml类型数据解析
v-text 和 {{}} 结果是一样的，但是{{}} 有个短暂的{{}} 显示
项目； v-text 和  {{}}，我们选择 {{}}

v-if的单路分支效果和 v-show 一样 

面试： v-if  vs v-show  有何区别呢？
v-if控制的元素的存在与否
v-show控制的事元素的display: none 属性

性能的差别： 
    当初始条件都为false时，v-show的初始渲染开销较高
    当频繁切换时，v-if的切换开销较高 
项目中： 
    频繁切换： v-show
    切换不频繁; v-if

v-bind 单项数据绑定
 	- 作用: 将一个数据赋值给已有属性

v-model 
    - 作用： 实现双向数据绑定
    - 作用范围： 表单元素，因为它默认绑定了 value
    - 经验： 看到表单元素，直接上v-model

wkj_1996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习vue第一天

Vue基础笔记一一、当我们通过script标签对引入Vue.js之后，我们会得到一个全局变量 Vue（直接挂在window身上）。二、查看Vue源代码总结：1.是通过匿名函数封装的，格式：（ function ( arg1,arg2) {}）（ a,b ）；2.好处：1. 安全性要高2. 自调用3. 解决了命令冲突。3.源代码封装的大致原理：(function ( global,fac...
复制链接

扫一扫