vue学习笔记

vue第一天

vuejs是什么

  • vuejs是一个JavaScript框架

  • vue是构建用户界面层的框架 只关注视图层

框架和库的区别

  1. 框架：是一套完整的解决方案，对项目的 侵入性比较大，项目如果需要更换框架，则需要重新架构整个项目

example: node中的express

  1. 库（插件）:提供某一个小功能 对项目的侵入性较小 如果某个库无法完成某些需求 就可以很容易切换到其他库实现需求

  1. 从jquery切换到 zepto

  2. 从ejs 切换到art-template

node(后端) 中的MVC与前端中的,MVVM中的区别

1. MVC

MVC : 是站在整个项目的角度考虑的

  • M:model数据库

  • V:view视图层

​

  • C：controller 逻辑控制层

​

2. MVVM

注意 : MVVM是站在前端的项目角度考虑

  • M: model 后台请求的数据 已经自己添加上去的数据

​

  • V:view 渲染的模板区域

​

  • VM：view model model和view的调度者 

​

vue 构造函数的属性

div部分

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app"></div>

js部分

<script>
var vm = new Vue({
  el:"#app", 
  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
  // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
  data:{
    msg:"要渲染的数据" 
    // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
  },
  //这里是一个对象指定函数的存放的位置
  methods:{
​
  }
})
</script>

渲染指令

  1. {{}} + cloakv-cloak如果解决页面闪烁问题

  • 通过[v-cloak] : {display:none} 先把指定的元素v-cloak隐藏

  • 当vue加载完毕之后把指定的v-cloak删除

  1. v-text :渲染文本的指令 不会解析标签

  2. v-html:会解析标签把标签里面的文本渲染到页面上

属性绑定

  1. v-bind 简写 :

  • .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)

  • .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)

  • .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

用法

  • 动态地绑定一个或多个特性，或一个组件 prop 到表达式。

  • 在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

  • 在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

  • 没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

  <!-- 绑定一个属性 -->
  <img v-bind:src="imageSrc">
​
  <!-- 缩写 -->
  <img :src="imageSrc">
​
  <!-- 内联字符串拼接 -->
  <img :src="'/path/to/images/' + fileName">
​
  <!-- class 绑定 -->
  <div :class="{ red: isRed }"></div>
  <div :class="[classA, classB]"></div>
  <div :class="[classA, { classB: isB, classC: isC }]">
​
  <!-- style 绑定 -->
  <div :style="{ fontSize: size + 'px' }"></div>
  <div :style="[styleObjectA, styleObjectB]"></div>
​
  <!-- 绑定一个有属性的对象 -->
  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
​
  <!-- 通过 prop 修饰符绑定 DOM 属性 -->
  <div v-bind:text-content.prop="text"></div>
​
  <!-- prop 绑定。“prop”必须在 my-component 中声明。-->
  <my-component :prop="someThing"></my-component>
​
  <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
  <child-component v-bind="$props"></child-component>
​
  <!-- XLink -->
  <svg><a :xlink:special="foo"></a></svg>

  1. v-model

    • vue中唯一一个双向数据绑定指令

    • 表单元素和<组件>中使用

双向数据绑定和单向数据绑定的区别

  1. 单向数据绑定model改变view 不能发过来

  2. 双向数据绑定model改变view改变 反之亦然

事件绑定和事件修饰符

  1. 事件绑定

  • v-on 简写 @

  1. 事件修饰符

  • stop阻止事件冒泡

  • parvent 阻止默认行为

  • capture 事件捕获

  • self 只阻止自己的事件

  • once 只阻止一次的默认行为

样式绑定指令

  1. class (推荐方式)

    • 普通数组 :class="['red','blue','active']"

    red blue active 已经在样式里面定义好了

    • 数组三元表达式 :class="['red','blue',flag?'active':'']"

    flag是在data里面定义好的布尔值

    • 数组对象 :class="['red','blue',{active:flag}}]"

    flag是在data里面定义好的布尔值 注意如果是对象里面的值不用打引号

    • 对象方式 :class="{red:true,blue:true}"

    对象里面的样式名可以用引号包含 key:value key是样式名 value是布尔值

  2. style (几乎不用)

  • 对象 :style="{color:red}"

  • 数组 ::style="[{color:red},{width:50px}]"

数组遍历

  1. v-for

    • 普通数组

    <div v-for="item in items">{{ item.text }}</div>

    • 数组对象

    <p v-for="(user,i) in list">id:{{user.id}} name {{user.name}} 索引 {{i}}</p>

    • 对象

    <div v-for="(val, key) in object"></div>

    • 数字

    <div v-for="item in 10"></div> 索引从1开始到10

  2. 注意点

v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：<div v-for="item in items" :key="item.id">{{ item.text }}</div>

v-if v-show

  • v-show 通过样式操作元素的显示隐藏

  • v-if是通过dom操作元素的添加删除

  1. 使用场景

  • 如果操作的DOM是少量都可用

  • 如果大量操作DOM推荐使用v-show

  • 频繁点击推荐使用v-show

posted @ 2018-09-28 14:13  cloud-keke  阅读(112)  评论(0)    收藏  举报