Vue学习笔记——one：Vue基础

Vue基础

渐进式JavaScript框架

声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建

官网：https://cn.vuejs.org/v2/guide/

易用：熟悉HTML、CSS、JavaScript知识后

灵活：在一个库和一套完整框架之间自如伸缩

高效：20kb运行大小，超快虚拟DOM

[vue官方文档]https://cn.vuejs.org/v2/guide/

Vue基本使用

步骤：

1、需要提供标签用于填充数据

2、引入vue.js库文件

3、可以使用vue的语法做功能

4、把vue提供的数据填充到标签里面

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）

data：模型数据（值是一个对象）

	//1、实例化
    let vm = new Vue({
        //2、添加选项参数
        //3、作用的元素
        el:"#app",
        //4、数据
        data: {
            name : 'jack Ma',
            age: 18,
            sex :'男'
         },
         //5、方法：函数
         methods: {}
     });

插值表达式用法

• 将数据填充到HTML标签里里面
• 插值表达式支持基本的计算操作

前端渲染

把数据填充到HTML

把模板和数据结合就是前端渲染，产物就是静态HTML

前端渲染方式

• 原生js拼接字符串
• 使用前端模板引擎
• 使用vue特有的模板语法

原生js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标签中。

缺点：不同开发人员的代码风格差别很大

使用前端模板引擎

基于模板引擎，拥有自己的一套模板语法规则

Vue模板语法

• 差值表达式
• 指令
• 事件绑定
• 属性绑定
• 样式绑定
• 分支循环结构

什么是指令？

指令的格式：以v-开始（比如：v-cloak）

指令的本质就是自定义属性

v-cloak指令

• 插值表达式存在问题：“闪动”
• 如何解决该问题：使用v-cloak指令
• 解决该问题的原理：先隐藏，替换好值后再显示最终的值

1、提供样式

[v-cloak]{
​		display:none;
​    }

2、在插值表达式所在的标签中添加v-cloak指令

原理：通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

数据绑定指令

• v-text 填充文本

  ​ 1、相比插值表达式更加简洁

• v-html 填充HTML片段

  ​ 1、存在安全问题

  ​ 2、本网站内部数据可以使用，来自第三方的数据不可以用

• v-pre 填充原始信息

  ​ 1、显示原始信息，跳过编译过程（分析编译过程）

{
    {msg}}

var vm = new Vue({
	el:'#app',
	data:{
		msg:'holle'，
		msg1: '
Html
'
	}
})

数据响应式

• 如何理解响应式

  • html5中的响应式（屏幕尺寸的变化导致样式的变化）
  • 数据的响应式（数据的变化导致页面内容的变化

• 什么是数据绑定

  • 数据绑定：将数据填充到标签中

• v-once只编译一次

  • 显示内容之后不再具有响应式功能

  v-once的应用场景：如果显示的信息后续不需要再修改，可以使用v-once，提高性能

双向数据绑定

双向绑定分析

• v-model指令用法

  v-model=‘数据源’;

MVVM设计思想

• M(model)
• V(view)
• VM(View-Model)

事件绑定

1、Vue如何处理事件？

• v-on指令用法

• v-on简写形式

2、事件函数的调用方式

• 直接绑定函数名称

  • hello
    

• 调用函数

  3、事件函数参数传递

  • 普通参数和事件对象

  • 最后一个参数代表事件对象

  • 如果事件直接绑定函数名称，那么默认会传递事件作为事件函数的第一个参数

  • 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

4、事件修饰符

• .stop阻止冒泡

  • 跳转
    

• .prevent阻止默认行为

  • 跳转
    

• 使用修饰符时，顺序很重要：相应的代码会以同样的顺序产生，因此，用

  • v-on:click.prevent.self:会阻止所有点击
  • v-on:click.self.prevent:只会阻止对元素自身的点击

• .self :给对象的本身绑定事件，点击子元素不起作用

• .once：只给事件绑定一次

5、按键修饰符

• .enter 回车键

• .delete删除键

• .tab

• .up

• .down

• .left

• .right

6、自定义按键修饰符

• 全局config.keyCodes对象
  • Vue.config.keyCodes.f1 = 112

简单计算器

1、通过v-model指令实现数值a和数值b的绑定

2、给计算按钮绑定事件，实现计算逻辑

3、将计算结果绑定到对应位置

属性绑定

1、Vue如何动态处理属性

v-bind：绑定标签属性，语法糖形式

• v-bind指令用法

  • 跳转
    

• 缩写形式

  • 跳转
    

2、v-model的低层实现原理分析

样式绑定

1、class样式处理

• 对象语法

• 数组语法

主要用于给控件加样式

    
    
    
    
    



    

        
测试样式
        切换
    
    

样式绑定相关语法细节

1、对象绑定和数组绑定可以结合使用

2、class绑定的值可以简化操作

3、默认的class如何处理？默认的class会保留

    
    
    
    
    



    

        
测试样式
        

        

        

        切换
    
    

style样式处理

• 对象语法

• 数组语法

        
1234
        

        


        切换
    
    

循环结构

v-for遍历数组

• {
        {item}}
  

• {
        {item}} + '----' + {
        {index}}
  

key的作用：帮助Vue区分不同的元素，从而提高性能

• {
        {item}} + '---' + {
        {index}}
  

item表示当前的数据，index表示索引

        

            
{
    {item}}------
            
{
    {item.cname}}------{
    {index}}-
            

            
{
    {item}}-----{
    {index}}