diff --git "a/\346\234\261\351\271\217/Class\344\270\216Style\347\273\221\345\256\232.md" "b/\346\234\261\351\271\217/Class\344\270\216Style\347\273\221\345\256\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..1601753edf07b8dfdd984351d816ed2d50bd8dc6 --- /dev/null +++ "b/\346\234\261\351\271\217/Class\344\270\216Style\347\273\221\345\256\232.md" @@ -0,0 +1,114 @@ +## Class与Style绑定 + + 我们可以传给 v-bind:class 一个对象，以动态地切换 class： + + class的表达不表达在于isActive是turn还是false(在浏览器的控制台中可看到) + ``` + + + + + + Document + + +
+ + 陨落神坛 + +
+ + + + + + +``` + + +#### 绑定的数据对象不必内联定义在模板里： + +``` + + + + + + Document + + +//class写两个会合并在一起，两个以上没效果 +
+ + 陨落神坛 + +
+ + + + + + +``` + + + +## 数组语法 +*和上面大同小异* +我们可以把一个数组传给 v-bind:class，以应用一个 class 列表： +``` +
+data: { + activeClass: 'active', + errorClass: 'text-danger' +} +``` + +渲染为： +``` +
+``` + + +## 对象语法 + ++ 用驼峰式命名（fontSize）或短横线分隔 (kebab-case，记得用引号括起来) ++ data里写效果属性，通过style调用 +``` +
+``` +``` +data: { + activeColor: 'red', + fontSize: 30 +} +``` ++ 或者直接绑定到一个样式对象，这会让模板更清晰： +``` +
+``` +``` +data: { + styleObject: { + color: 'red', + fontSize: '13px' + } +} +``` \ No newline at end of file diff --git "a/\346\234\261\351\271\217/vue\345\256\236\344\276\213.md" "b/\346\234\261\351\271\217/vue\345\256\236\344\276\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..94b2fe2606c8336ff5b3c22fc31801a823aa1b73 --- /dev/null +++ "b/\346\234\261\351\271\217/vue\345\256\236\344\276\213.md" @@ -0,0 +1,45 @@ +## 实例 ++ 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： +``` +var vm = new Vue({ + // 选项 +}) +``` ++ 文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。 ++ 一个应用通常只有一个根实例（理解：就像一个最顶层的文件夹） + + +## 数据与方法 ++ 所有的vue组件都是vue实例 + ++ 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property （属性）才是响应式的。也就是，定义属性要在实例化之前，不然属性不会出现在对象中 +``` + + + + + + Document + + + //引用sing +
+ {{sing}} +
+ + + + + + +``` diff --git "a/\346\234\261\351\271\217/\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\346\234\261\351\271\217/\344\272\213\344\273\266\345\244\204\347\220\206.md" new file mode 100644 index 0000000000000000000000000000000000000000..29761bee0bf7a7e36b6e4e18556999d4a15082b8 --- /dev/null +++ "b/\346\234\261\351\271\217/\344\272\213\344\273\266\345\244\204\347\220\206.md" @@ -0,0 +1,43 @@ +## 事件处理 + ++ dom事件：如一个点击按钮，点击就是一个dom事件 +``` + + + + + + Document + + +
+ +
+ + + + + + +``` \ No newline at end of file diff --git "a/\346\234\261\351\271\217/\345\210\227\350\241\250\346\270\262\346\237\223.md" "b/\346\234\261\351\271\217/\345\210\227\350\241\250\346\270\262\346\237\223.md" new file mode 100644 index 0000000000000000000000000000000000000000..6532c97b9648c42a21320e554ef439473f42545c --- /dev/null +++ "b/\346\234\261\351\271\217/\345\210\227\350\241\250\346\270\262\346\237\223.md" @@ -0,0 +1,258 @@ +## 列表渲染 + +我们可以用 v-for 指令基于一个数组来渲染一个列表。 +1. 在 v-for 块中，我们可以访问所有父作用域的 property。 +2. v-for 还支持一个可选的第二个参数 +3. v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 +``` + + + + + + 列表渲染 + + + +
+ + + +
  • {{index+1}}.{{item.name}}
    • +
    + + + + + +``` + +#### 在 v-for 块中，我们可以访问所有父作用域的 property。 +``` + + + + + + + 列表渲染 + + + + +
    + +
  • + +
    • +
    + + + + + +``` +渲染效果： + ++ 一阵微风吹起一个思念1.小葱拌豆腐 ++ 一阵微风吹起一个思念2.红烧狮子头 ++ 一阵微风吹起一个思念3.千层肉 ++ 一阵微风吹起一个思念4.手撕鸡 ++ 一阵微风吹起一个思念5.糖醋排骨 + ++ 一场细雨泛起一丝安宁1.小葱拌豆腐 ++ 一场细雨泛起一丝安宁2.红烧狮子头 ++ 一场细雨泛起一丝安宁3.千层肉 ++ 一场细雨泛起一丝安宁4.手撕鸡 ++ 一场细雨泛起一丝安宁5.糖醋排骨 + +
    +
    + + ++ 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为*每项*提供一个唯一 key attribute： ++ 建议尽可能在使用 v-for 时提供 key attribute +``` +
    + +
    +``` + ++ 但要注意的是，不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。 + + +## 数组更新检测 +Vue +变异方法 ++ push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 + ++ pop() 方法用于删除并返回数组的最后一个元素。 + ++ shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 + ++ unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 + ++ splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 + ++ sort() 方法用于对数组的元素进行排序。 + ++ reverse() 方法用于颠倒数组中元素的顺序。 + +替换数组 ++ filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 + ++ concat() 方法用于连接两个或多个数组。 + ++ slice() 方法可从已有的数组中返回选定的元素。 + +其他 ++ split() 方法用于把一个字符串分割成字符串数组。 + +

    + + + + +**v-for 与 v-if 一同使用，当它们处于同一节点，v-for 的优先级比 v-if 更高，但并不推荐两者同时使用** + + + + + +## 在组件上使用 v-for +实例： +``` + + + + + + + 列表渲染 + + + + +
    + + + + +
    + + + + + +``` \ No newline at end of file diff --git "a/\346\234\261\351\271\217/\346\250\241\346\235\277\350\257\255\346\263\225.md" "b/\346\234\261\351\271\217/\346\250\241\346\235\277\350\257\255\346\263\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..157f06fb103270c24208723ad06f1ca3d6d7adb2 --- /dev/null +++ "b/\346\234\261\351\271\217/\346\250\241\346\235\277\350\257\255\346\263\225.md" @@ -0,0 +1,137 @@ +# 模板语法 + + +1. v-bind 动态的绑定数据，简写为: + +2. v-on 绑定事件监听器，简写为@ + +3. v-model 在表单控件元素上创建双向数据绑定 + +4. v-if 根据值的真假，切换元素会被销毁、重建 + +5. v-else 条件都不符合时渲染 + +6. v-else-if 多条件判断，为真渲染 + +7. v-for 基于源数据多次渲染元素或模板块 + +8. v-html 可以解析数据中的html结构 + +9. v-text 更新数据，会覆盖已有结构 + +10. v-show 根据值的真假，切换元素display属性 + +11. v-once 只渲染一次，随后数据更新不重新渲染 + +12. v-pre 跳过元素和子元素的编译过程 + +13. v-cloak 隐藏未编译的Mustache语法，css中设置[v-cloak]{display:none} +## 插值 ++ 数据最常用见的就是使用双大括号的“Mustache”语法文本插值 + +``` +Message: {{ msg }} +都会更新。 +``` ++ Mustache 标签将会被替代为对应数据对象上 msg property(属性) 的值。当绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新 ++ 使用 v-once 指令时，执行一次性的插值，当数据更新时插值处内容不更新 + + +### 原始 HTML +双打括号将数据解释为普通文本，要写HTML代码则要用v-html指令 +``` + + + + + + Document + + +
    + + + {{rawHtml}} + + + +
    + + + + + + + +``` + + ++ Mustache 语法不能作用在 HTML attribute（标签属性） 上，要使用 v-bind 指令： +如下 +``` +
    +``` + + +## 指令 +指令的职责是，当表达式的值改变时，将其产生的连带影响 ++ 指令是带v-前缀的特殊属性（attribute），它的值是单个JavaScript表达式，但v-for例外 ++ 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute： +``` +... +``` + +## 动态参数 + ++ 用方括号括起来的 JavaScript 表达式作为一个指令的参数： +``` + ... +``` +这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值(实时更新到最新的值，如点击多少次)，求得的值将会作为最终的参数来使用。 +``` + + + + + + + Document + + + + +
    + + 这是你第{{msg}}次点击 + + + 绑定了一个链接 + +
    + + + + + + +``` \ No newline at end of file diff --git "a/\346\234\261\351\271\217/\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" "b/\346\234\261\351\271\217/\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..c900ff52534dadff05f82ffc51466e3f1fa2479f --- /dev/null +++ "b/\346\234\261\351\271\217/\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232.md" @@ -0,0 +1,198 @@ +## 表单绑定 + ++ v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。(总会忽略标签属性，标签属性会被覆盖) + + +**下列中，“树叶”就被忽略被“蓝色幻想”代替** + + +``` + + + + + + Document + + +
    + +
    + + + + + + +``` + + ++ v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件： + +1. text 和 textarea 元素使用 value property 和 input 事件； +2. checkbox 和 radio 使用 checked property 和 change 事件； +3. select 字段将 value 作为 prop 并将 change 作为事件。 + + + +**如下面的不同选框事件：** + + +### 复选框 +单个复选框，绑定到布尔值，显示true或false +，checkbox触发显示true或false ++ checkbook：复选框 +``` + + + + + + + Document + + + +
    + + + + + +
    + + + + + + + +``` + +### 多个复选框，绑定到同一个数组： +value代表对应项的值，并不是通过这个选的 +``` + + + + + + + Document + + + +
    + + + + + + + + +
    + + + + + + + +``` + + +## 单选按钮 +``` +
    + + +
    + + +
    + Picked: {{ picked }} +
    +``` + + +``` +new Vue({ + el: '#example-4', + data: { + picked: '' + } +}) +``` + +## 选择框(多选时一样是绑定到数组) + + +``` +
    + + Selected: {{ selected }} +
    +``` + +``` +new Vue({ + el: '...', + data: { + selected: '' + } +}) +``` + + +## 修饰符 + ++ .number： +如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： +``` + +``` ++ .layer:数据彻底改变之后才获取值 ++ .trim:删除数据两边的空格 ++ +