阅读 128
vue学习笔记-Vue核心(一)

vue学习笔记-Vue核心(一)

前言:此笔记是通过学习由尚硅谷的天禹老师所主讲的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 事件监听

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

文章分类
前端
文章标签