vue基础篇

本人是一名Android开发人员，最近项目前端人员吃紧，于是开始了vue的自学之旅。

vue简介

https://cn.vuejs.org 作者:尤雨溪

1. JavaScript框架
2. 简化Dom操作
3. 响应式数据驱动（数据驱动视图）

vue第一个程序

1. 导入开发版本的Vue.js
2. 创建Vue实例对象, 设置el属性和data属性
3. 使用简洁的模板语法把数据渲染到页面上

  

    
    {{ message }}
  
  
  
  

  

el:挂载点，绑定页面元素

• Vue会管理el选项命中的元素及其内部的后代元素
• 可以使用其他的选择器,但是建议使用ID选择器
• 可以使用其他的双标签,不能使用HTML和BODY

MVVM

Vue指令

以v-开头的一组特殊语法,分为三类介绍

1. v-text, v-html, v-on

内容绑定，事件绑定

• I. v-text （不如差值表达式好用）
  设置标签的文本值(textContent)

  

      
      
深圳
      
{{ message +'!'}}深圳
  

  
  

  

网页渲染：
Hello Vue!
Hello Vue!深圳

总结：
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容。

• II. v-html
  设置标签的innerHTML

网页渲染：

总结
v-text指令无论内容是什么,只会解析为文本
v-html当内容中有html结构会被解析为标签，没有才解析为文本

• iii. v-on
  为元素绑定事件

总结
事件绑定的方法写成函数调用的形式，可以传入自定义参数
事件的后面跟上 .修饰符对事件进行限制，@keyup.enter可以限制触发的按键为回车
vue方法不可以重载哦

2. v-show, v-if, v-bind

• i. v-show, v-if
  根据表达值的真假,切换元素的显示和隐藏

  

    
    
    
冻死了---v-show
    
冻死了
  

  
  

  

点击切换，发现v-show和v-if都能实现元素显示状态的切换，它们之间有啥区别呢，右键点击inspect进入调试模式，可以发现隐藏时，它们是有区别的

    
    
冻死了---v-show
    

总结
根据真假切换元素的显示状态，指令后面的内容,最终都会解析为布尔值
v-show原理是修改元素的display,实现显示隐藏
v-if本质是通过操纵dom元素来切换显示状态
频繁切换用v-show，一次性用v-if

• ii.v-bind
  设置元素的属性(比如:src,title,class)
  设想有一个需求，需要动态展示图片，你可能会说vue不就是数据驱动视图嘛
  定义一个变量imgUrl,不断修改imgUrl的值不就完了

可是浏览器一运行，立马打脸。原来差值表达式{{}}只能修改元素的值（尖括号外面的），不能修改元素的属性。

以下是一个动态更新猫图的网页，借用v-bind实现，api.thecatapi.com可以返回各种猫图

总结

v-bind 经常用于修改class，实现不同的显示状态, 只是单向变动

对象的方式

三目表达式

v-bind和v-model区别：
https://blog.csdn.net/u011486491/article/details/90232280
v-bind
html中的属性、css的样式、对象、数组、number 类型、bool类型
v-model
主要是用在表单元素中，它实现了双向绑定。在同事使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的中实现双向绑定

源代码参考