Vue的基本知识你都了解吗

目录

• 1.Vue的基本知识
• 1.1Vue的使用
• 1.2插值语法
• 1.3v-bind（单向绑定）
• 1.4v-model（双向绑定）
• 1.4.1v-model和v-bind的区别
• 1.4.2v-model简单小例子
• 1.4.3v-model收集表单案例
• 1.5理解MVVM
• 1.6Object.defineProperty(重要)
• 1.7数据代理（重要）
• 总结

1. Vue的基本知识

1.1 Vue的使用

• 可以导入Vue文件或者是通过CDN引入
• 想要让Vue工作就必须要创建一个Vue的实例对象，并且配置对象
• 在真实的开发中只有一个Vue的实例，并且配合组件一起使用

1.2 插值语法

  	

  			Hello!{{name}} {{Date.now()}} {{address}}
  	
  

注意点：

1.{ { xxx } } 这里的xxx要写的是js表达式，并且它会自动读取到data中所有的属性

2.一旦data中的数据发生改变，那么页面用带该数据的地方也会自动更新

3.插值语法的功能：用于去解析标签体内容，标签体就是起始标签和结束标签中间的内容，例如：

xxx

xxx就是标签体

4.要区分什么是js表达式？什么是js代码？

    1. 什么是js表达式？       表达式可以产生一个值或者返回一个值         (1) a = 1         (2) a+b         (3) Date.now() 函数         (4) x = Y ? 1 : 2                    2. 什么是js代码？（语句）     (1) if(){}     (2) for(){}js表达式就是一种特殊的js代码    1. 什么是js表达式？
       表达式可以产生一个值或者返回一个值
         (1) a = 1
         (2) a+b
         (3) Date.now() 函数
         (4) x = Y ? 1 : 2
 	2. 什么是js代码？（语句）
     	(1) if(){}
     	(2) for(){}
		js表达式就是一种特殊的js代码

1.3 v-bind（单向绑定）

​ 指令语法有很多，下面例子只是其中一个 v-bind: ===> 可以简写为 :

​ 加入该指令后 " " 里的内容就会变成js表达式，而不是字符串（这个知识点很重要后面使用的地方会很多）

​ 该方法是解析标签得属性，指令的功能很强大可以解析标签（例如：解析标签体，标签属性，绑定事件）

        
你好啊！{{name}}
        

        点击进入{{school.name}}
        点击进入{{school.name}}
    
   

1.4 v-model（双向绑定）

1.4.1 v-model和v-bind的区别

• v-bind(单项绑定)：数据只能从data流向页面
• v-model(双向绑定)：不仅数据从data流向页面，而且可以从页面流向data
• 双向绑定一般用在表单类元素上面（input，select，含有value属性值）
• 如果遇到像checkbox这种类型的没有value值时，v-model/ v-bind 传boolearn值可以去控制该类型的状态

    

        
        
        
        单项数据绑定: 

        双向数据绑定: 
    
    

1.4.2 v-model 简单小例子

        
        
{{message}}
    
    

1.4.3 v-model 收集表单案例

1.v-model的三个修饰符：

• v-model.trim: 去掉前后空格
• v-model.number:将收到的数据转换为number类型
• v-model.lazy:表示当失去焦点的时候再接收数据

2.v-model收集的就是value的值

• 当input类型为radio，需要我们去手动配置一个value值
• 当input类型为checkbox，它返回的布尔值，根据情况进行是否配置value值
• 记住如果收集的是多个，属性值要是一个空的数组

 

        
 
            
            账号：


            密码：


            
            年龄：


            性别：
            
            男
            女


            爱好：
            打篮球
            敲代码
            干饭
            


            所属校区：
            
                请选择地区
                北京
                上海
                广州
                深圳
            


            
            其他信息：
            


            同意并接受
            《用户协议》
            


            提交
        
    
    

1.5 理解MVVM

M

模型(Model) ：data中的数据

V

视图(View) ：模板代码（不是静态页面）

VM

viewModel: 视图模型（Vue的实例）

对MVVM的理解：

MVVM 本质上即模型-视图-视图模型。模型model指的是后端传递的数据，视图view指的是所看到的页面。视图模型viewModel是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：

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

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

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

1.6 Object.defineProperty(重要)

 Object.defineProperty
                - 第一个参数：指定的对象
                - 第二个参数：要添加的属性名
                - 第三个参数：配置项

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Vue的一些基本知识，希望对大家有帮助！