vue.js及项目实战[笔记]— 01 vue.js

一. vue基础

1. 历史介绍

• angular 09年，年份较早，一开始大家是拒绝的
• react 2013年，用户体验较好，直接拉到一堆粉丝
• vue 2014年，用户体验较好

前端框架与库的区别

• jquery库->DOM（操作DOM）+请求
• art-template 库->模板引擎
• 框架 = 全方位功能齐全
  • 简易的DOM体验+发请求+模板引擎+路由功能
• KFC的世界里，库就是一个小套餐，框架就是全家桶
• 代码上的不同
  • 一般使用库的代码，是调用某个函数，我们自己把控库的代码
  • 一般使用框架，其框架在帮我们运行我们编写好的代码
    • 框架：初始化自身的一些行为
      • 执行你所编写的代码
      • 施放一些资源

vue起步

• 1.引包
• 2.启动new Vue({el:目的地,template:模板内容})
• options
  • 目的地 el
  • 内容 template
  • 数据 data

插值表达式

• {{表达式}}
  • 对象（不要连续3个{{name:'jack'}}）
  • 字符串{{'xxx'}}
  • 判断后的布尔值{{true}}
  • 三元表达式{{true?'正确':'错误'}}
• 可以用于页面中简单粗暴的调试
• 注意：必须在data这个函数中返回的对象中声明

什么是指令

• 在vue中提供了一些对于页面+数据的更为方便的输出，这些操作就叫做指令，以v-xxx表示
  • 类似于html页面中的属性<div v-xxx></div>
• 比如在angular 中以 ng-xxx开头的就叫做指令
• 在vue中 以v-xxx开头的叫做指令
• 指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相关DOM操作的绑架

中常用的v-指令演示

• v-text 元素的InnerText属性，必须是双标签
• v-html 元素的innerHTML
• v-if 判断是否插入这个元素
• v-else-if
• v-else
• v-show 隐藏元素，如果确定要隐藏，会给元素的style加上display:none

v-text 只能用在双标签中
v-text 其实就是给元素中的innerText赋值
v-html 其实就是给元素的innerHTML赋值
v-if 如果值为false，会留下一个<!----->作为标记，玩万一未来v-if的值是true了，就在这里插入元素
如果有if和else就不需要单独留坑了
如果全用上 v-if 相邻v-else-if 相邻 v-else 否则 v-else-if 可以不用
v-if 和 v-else-if 都有等于相应的值，而v-else直接写
v-if家族都是对元素进行插入和移除的操作
v-show是显示与否的问题

注意：指令其实就是利用属性作为标识符，简化DOM操作，
看：v-model="xxx"
v-model 代表要做什么  xxx代表针对的js内存对象
写在那个元素上，就对那个元素操作

v-bind使用

• 给元素的属性赋值
  • 可以给已经存在的属性赋值input value
  • 也可以给自定义属性赋值 mydata
• 语法 在元素上 v-bind：属性名='常量||变量名'
• 简写形式：属性名="变量名"
• <div v-bind:原属性名="变量"></div>
<div :属性名="变量"></div>

v-on的使用

• 处理自定原生事件的，给按钮添加click并让使用变量的样式改变
• 在元素上v-on：原生事件名= "给变量进行操作"
• 简写形式：@原生事件名 = "给变量进行操作"

阶段总结

• 如何启动vue
  • 1.引包
  • 2.留坑
  • 3.启动（new Vue）
  • options：el/template/data函数
• 更便捷的操作DOM及数据 v-xxx指令
  • v-text/v-html/v-if/v-show/v-bind/v-on
  • v-bind绑定属性值
  • v-on绑定事件

v-model

• 双向数据流（绑定）
  • 页面改变影响内存（js）
  • 内存（js）改变影响页面

v-bind 和 v-model的区别

• input v-model="name"
  • 双向数据绑定 页面对于input的value改变，能影响内存中name变量
  • 内存js改变name的值，会影响页面重新渲染最新值
• input : value="name"
  • 单向数据绑定 内存改变影响页面改变
• v-model：其的改变影响其他 v-bind：其的改变不影响其他
• v-bind 就是对属性的简单赋值，内存中值改变，还是会触发重新渲染

v-for的使用

• 基本语法 v-for="item in arr"
• 对象的操作v-for="item in obj"
• 如果是数组没有id
  • v-for="(item,index) in arr" : class="index"
• 各种v-for的属性顺序（了解）
  • 数组 item,index
  • 对象 value，key，index

关于对象内存的this

• vue已经把以前this是window或者事件对象的问题搞定了
• methods和data本身是在同一个对象中的，所以在该对象中可以通过this随便取
• this.xxx取data中的值，this.xxx Method调methods中的函数

漂亮的列表

• class是可变的

渲染组件-父使用子组件

• 1.创建子组件（对象）

var Header = {
    template:'模板',
    data(){
        // 是一个函数
    },
    methods:{
        // 功能
    },
    components:{
        // 子组件们
    }
}

• 2.在父组件中声明，根属性components:{组件名:组件对象}
• 3.在父组件要用的地方使用<组件名></组件名>
  • 在不同的框架中，有的不支持大写字母，用的时候
    • 组件名 MyHeader
    • 使用my-header
• 总结：有父，生子，声明，使用

父子组件传值（父传子）

• 1.父用子的时候通过属性传递
• 2.子要声明props:['属性名']来接收
• 3.收到就是自己的了，随便你用
  • 在template中 直接用
  • 在js中 this.属性名 用
• 总结：父传，子声明，就是子的了
• 小补充：常量传递直接用，变量传递加冒号

总结父传子
* 父用子 先有子，声明子，使用子
* 父传子 父传子（属性），子声明（收），子直接用（就是自己的一样）