vue学习笔记-Vue核心（一）

皓月u
883 阅读7分钟

前言：此笔记是通过学习由尚硅谷的天禹老师所主讲的Vue技术全家桶教程（目前公认b站最好的vue教程）同步归纳整理出来的，如有不足请多指教！送上课程连接：www.bilibili.com/video/BV1Zy…

第一章 Vue核心

1.基本认识

1.1官网

英文官网: vuejs.org/

中文官网: cn.vuejs.org/

1.2介绍与描述

1.动态构建用户界面的渐进式JavaScript框架

01.png

1.3特点

  1. 遵循 MVVM 模式
  2. 编码简洁，体积小，运行效率高，适合移动/PC 端开发
  3. 它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目
  4. 采用组件化模式，提高代码复用率、且让代码更好维护
  5. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
  6. 使用虚拟DOM和Diff算法，尽量复用DOM节点

1.4与其他前端JS框架的关联

借鉴 angular 的 模板 和 数据绑定 技术 借鉴 react 的 组件化 和 虚拟DOM 技术

1.5引入Vue.js的方法

  • 本地引入
  • CDN引入

2.创建Vue对象

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  3. root容器里的代码被称为【Vue模板】；
  4. Vue实例和容器是一一对应的；
  5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
  7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；、
//创建vue实例
new Vue({
    el:'#root',//用于指定当前Vue实例为哪个容器服务
    data:{//用于存储数据，供el指定的容器去使用
        name:'皓月' 
    }
})

注意区分：js表达式 和 js代码(语句)

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方： (1). a (2). a+b (3). demo(1) (4). x === y ? 'a' : 'b'

js代码(语句) (1). if(){} (2). for(){}

2.1 el

指定根element(选择器)

2.2data

初始化数据(页面可以访问)

关于el和data的两种写法

el有2种写法

(1) new Vue时候配置el属性。

const v = new Vue({
    el:'#root', //第一种写法
    data:{
        name:'皓月'
    }
})

(2) 先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。

const v = new Vue({
    data:{
        name:'皓月'
    }
})
v.$mount('#root') //第二种写法 */

data有2种写法

(1) 对象式

data:{
    name:'皓月'
}

(2)函数式

data(){
    console.log('@@@',this) //此处的this是Vue实例对象
    return{
        name:'皓月'
    }
}

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

  1. 一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

3.模板语法

3.1模板的理解

html中包含了一些js语法代码，分别为：

差值语法：双大括号表达式（“Mustache”语法）

指令语法：指令（以v-开头的自定义标签属性—本质）

3.2差值语法

1.功能：用于解析标签体内容，向页面输出数据

2.写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

3.3指令语法

1.功能：解析标签的属性、解析标签体的内容、绑定事件

内置指令

v-bind
  • v-bind 指令被用来响应地更新 HTML 属性
  • 写法：v-bind:href =“xxx” 简写为 :href=“xxx”
v-model
  • 双向数据绑定
  • v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤

v-on
  • 用来绑定指定事件名的回调函数(事件监听)
  • 写法：v-on:click=“xxx” 简写为 @click=“xxx”
v-text
  • 向其所在的节点中渲染文本内容。
  • 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html
  • 向指定节点中渲染包含html结构的内容。
  • 与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

(2).v-html可以识别html结构。

  • 严重注意：v-html有安全性问题！！！！

    (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

v-cloak
  • 本质是一个特殊属性(没有值)，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
  • 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
<style>
    [v-cloak]{
        display:none;
    }
</style>
<body>
//如果不利用v-cloak设置隐藏样式页面会在js加载出来且vue启用之前直接显示{{name}}
<h2 v-cloak>{{name}}</h2>
//延迟加载的js资源
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>   
</body>
data：{
    name：'皓月'
}
v-noce
  • v-once所在节点在初次动态渲染后，就视为静态内容了 (只执行一次)
  • 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-pre
  • 跳过所在节点的编译过程
  • 可用该指令跳过：没有指令语法、差值语法的节点，能加快编译 (优化页面加载提高效率)
v-for
  • 遍历数组/对象/字符串
v-if
  • 条件渲染（动态控制节点是否存存在）
v-else
  • 条件渲染（动态控制节点是否存存在）
v-show
  • 条件渲染 (动态控制节点是否展示)

自定义指令

定义语法:

全局注册

Vue.directive('指令名', {//配置对象
    ...
  }
})
或
Vue.directive('指令名', function(){//回调函数
    ...
}
})

局部注册

new Vue({
    directives:{
        指令名:{//配置对象}
    }
})
或
new Vue({
    directives:{
        指令名:function(){//回调函数
        }
    }
})    
配置对象中的回调函数：
  1. bind：指令与元素成功绑定时调用。
  2. inserted：指令所在元素被插入页面时调用。
  3. update：指令所在模板结构被重新解析时调用。

示例：

定义一个v-fbind指令，让其所绑定的 input元素默认获取焦点。

<input type="text" v-fbind:value="n">
data:{
    n:1
},
directives:{
//fbind函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
fbind:{
    //第一个参数是自定义指令所在标签的dom实例，第二参数是一个绑定对象里面有自定义属性所用的value值
    bind(element,binding){
        element.value = binding.value
    },
    //第一次调用(绑定)时input标签还没渲染到页面所以获取焦点的方法只能放在inserted方法中实现
    inserted(element,binding){
        element.focus()
    },
    //指令所在的模板被重新解析时
    update(element,binding){
        element.value = binding.value
    }
}

要注意的点

1.指令定义时不加v-，但使用时要加v-；

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

<h2>放大10倍后的n值是：<span v-big-number="n"></span>
directives:{
    //注意：带-的key要用完整写法'xxx'
    'big-number'(element,binding){
        element.innerText = binding.value * 10
    }
}

\

4.数据绑定

单向数据绑定(v-bind)：数据只能从data流向页面

语法：v-bind:value = "xxx" 可以简写为   :value ="xxx"

双向数据绑定 (v-mode)：数据不仅能从 data 流向页面，还能从页面流向 data,一般应用于表单类元素(其中的value对话)

语法： v-mode:value="xxx" 可以简写为  v-mode="xxx"

5.MVVM模型

02.png

M——模型(Model)：data中的数据

V——视图(View)：模板代码（即html页面）

Vm——ViewModel：视图模型 即Vue的实例,将数据和视图层建立联系

  • Dom Listeners （Dom 监听）
  • Data Bindings （数据绑定）
  1. data中所有的属性，最后都出现在了vm身上。
  2. vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

总结

MVVM 本质上是 MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。

模型model指的是后端传递的数据，视图view指的是所看到的页面。

视图模型viewModel是 mvvm 模式的核心，它是连接 view和model的桥梁。它有两个方向：

  • 将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定
  • 将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听

这两个方向都实现的，我们称之为数据的双向绑定

avatar
文章
阅读
粉丝