一. 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.属性名 用
  • 总结:父传,子声明,就是子的了
  • 小补充:常量传递直接用,变量传递加冒号
总结父传子
* 父用子 先有子,声明子,使用子
* 父传子 父传子(属性),子声明(收),子直接用(就是自己的一样)

vue.js及项目实战[笔记]— 01 vue.js的更多相关文章

  1. vue.js及项目实战[笔记]— 03 vue.js插件

    一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...

  2. vue.js及项目实战[笔记]— 02 vue.js基础

    一. 基础 1. 注册全局组件 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码 全局APIVue.component('组件名','组件对象') 2.附加功能:过滤器&监 ...

  3. vue.js及项目实战[笔记]— 05 WebPack

    一. 历史介绍 1. 规范 AMD Commonjs||CMD UMD 参考:认识AMD.CMD.UMD.CommonJS 2. 工具 npm bower webpack browserify 参考: ...

  4. vue.js及项目实战[笔记]— 04 axios

    一. axios 1. 基本使用 axios.method('url',[,...data],options) .then(function(res){ }) .catch(function(err) ...

  5. Unity3D项目实战笔记(10):Unity3D编译IPA的PostEvents–节约时间利器

    最近,SDK支付等接入差不多了,就从Unity3D生成IPA (企业版License), 然,需要手动执行的PostEvents竟然多大10项+, 这些我默默的承受了1周时间,每次约浪费20分钟-额外 ...

  6. Unity3D项目实战笔记(5):延时功能的几种实现

    我所做过的系统,分单机版系统(2005年).CS系统(2010年).实时系统(2015年),各个系统均有“延时”功能:定时调度的: 本博客说的是实时系统中的延时功能(基于Unity3D游戏引擎). 在 ...

  7. Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  8. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  9. vue.js+koa2项目实战(一)创建项目和elementUI配置

    前端采用vuex+element-ui: 后端采用koa2+restfulAPI+sequlize: (一)项目介绍 宠物社区 1.社区 2.好友 3.说说 4.宠粮 5.健康 (二)项目框架 1.V ...

随机推荐

  1. what does GIT PUSH do exactly?

    有效理解 git 的对象模型 https://stackoverflow.com/questions/26005031/what-does-git-push-do-exactly 所谓分支, 就是一个 ...

  2. 转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

    作者:德来 segmentfault.com/a/1190000004292479 如有好文章投稿,请点击 → 这里了解详情 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如: ...

  3. Testing - 软件测试知识梳理 - 测试用例

    测试用例 是指对一项特定的软件产品进行测试任务的描述,体现测试方案.方法.技术和策略. 内容包括测试目标.测试环境.输入数据.测试步骤.预期结果.测试脚本等,并形成文档. 每个具体测试用例都将包括下列 ...

  4. jvm-垃圾回收gc简介+jvm内存模型简介

    gc是jvm自动执行的,自动清除jvm内存垃圾,无须人为干涉,虽然方便了程序员的开发,但同时增加了开发人员对内存的不可控性. 1.jvm内存模型简介 jvm是在计算机系统上又虚拟出来的一个伪计算机系统 ...

  5. SQL查询去掉重复数据

    本文主要总结数据库去掉重复数据的方法 去掉重复数据的方法: 第一种:distinct 根据单个字段去重,能精确去重: 作用在多个字段时,只有当这几个字段的完全相同时,才能去重: 关键字distinct ...

  6. Hadoop项目实战-用户行为分析之应用概述(三)

    1.概述 本课程的视频教程地址:<项目工程准备> 本节给大家分享的主题如下图所示: 下面我开始为大家分享今天的第三节的内容——<项目工程准备>,接下来开始分享今天的内容. 2. ...

  7. 杜绝假死,Tomcat容器做到自我保护,设置最大连接数(服务限流:tomcat请求数限制)

    为了确保服务不会被过多的http长连接压垮,我们需要对tomcat设定个最大连接数,超过这个连接数的请求会拒绝,让其负载到其它机器.达到保护自己的同时起到连接数负载均衡的作用. 一.解决方案:修改to ...

  8. ClickHouse之集群搭建以及数据复制

    前面的文章简单的介绍了ClickHouse,以及也进行了简单的性能测试.本次说说集群的搭建以及数据复制,如果复制数据需要zookeeper配合. 环境: 1. 3台机器,我这里是3台虚拟机.都安装了c ...

  9. mysql 查看建表语句

    show create table `table_name`; 结果如下:

  10. SQL Case when 的使用

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...