diff --git "a/\346\275\230\351\207\221\351\223\216/2021-5-25.md" "b/\346\275\230\351\207\221\351\223\216/2021-5-25.md" new file mode 100644 index 0000000000000000000000000000000000000000..e6c89970a60bba0546cee2313e28c758aff44f00 --- /dev/null +++ "b/\346\275\230\351\207\221\351\223\216/2021-5-25.md" @@ -0,0 +1,60 @@ +Vue 第一节课 + +Div +``` +
+ + + + 这里有点东西哦 + +
+ + +
+

+ 你能看到我波 +

+
+ + + + + +
+
    +
  1. {{todo.text}}
    2. +
+
+ +``` + +Script +``` + + +``` + +2. 处理用户输入 + +``` +
+ + + + + + + + + + +
+
+ + + + + + + + +``` + +3. 组件化应用构建 创建Vue.component('组件名称',{props:['绑定的属性的名称'],template:`样式`}) + +``` + +
+
    + //在创建好的组件中遍历创建的数组 在定义一个绑定名称来获取item的属性 即绑定名称=item 类似遍历传入值给变量只是替换了原有名称为定义的绑定名称 + +
+
+ + + +``` \ No newline at end of file diff --git "a/\346\275\230\351\207\221\351\223\216/2021-5-28.md" "b/\346\275\230\351\207\221\351\223\216/2021-5-28.md" new file mode 100644 index 0000000000000000000000000000000000000000..ca555d61d9c2f2adae2d876ee13bcb0b65ea1591 --- /dev/null +++ "b/\346\275\230\351\207\221\351\223\216/2021-5-28.md" @@ -0,0 +1,46 @@ +# 创建一个 Vue 实例 +``` + var app=new Vue(object); +``` +# Vue实例中的数据 +``` + + //如此给Vue实例传入数据，那么app.msg和data.msg是相等的，在改变其中任一值时另一个也会随之改变 + //若在改变data.变量名 是data对象中没有此变量名那么view将不会发生改变 +``` +### 如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值 +``` +data: { + newTodoText: '', + visitCount: 0, + hideCompletedTodos: false, + todos: [], + error: null +} +``` +### 除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来 +``` +app.$data === data +``` +$watch 是一个实例方法 +``` +app.$watch('msg', function (newValue, oldValue) { + console.log(data); + // 这个回调将在 `app.msg ` 改变后调用 +}) +``` + +# 实例生命周期钩子 +在Vue实例被创建时会有一系列的初始化过程，有一些函数可以在Vue实例初始化时被执行调用，这些函数就被称为实例生命周期钩子。 +有created、mounted、updated、destroyed、beforeUpdate等 \ No newline at end of file diff --git "a/\346\275\230\351\207\221\351\223\216/2021-5-29.md" "b/\346\275\230\351\207\221\351\223\216/2021-5-29.md" new file mode 100644 index 0000000000000000000000000000000000000000..5ac1608b923656d000533c99366f4dbf269a0f3f --- /dev/null +++ "b/\346\275\230\351\207\221\351\223\216/2021-5-29.md" @@ -0,0 +1,50 @@ +# 插值 +### 文本 +数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： +``` +Message: {{ msg }} +``` +### 原始Html +双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令： +``` + +``` +在Vue实例中写入rawHtml=Html代码 +### 属性 +插值语法不能作用在 HTML 属性上，遇到这种情况应该使用 v-bind 指令： +``` + + + data:{ + isButtonDisabled:true, + } +``` +### 绑定js表达式 +对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。 +``` +
+``` +每个绑定都只能包含单个表达式 +### 动态参数 +从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数： +``` + ... +``` +这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。也可也在data property 中给attributeName设置成一个数组来给其进行随即赋值 +### 缩写 +v-bind 缩写 +``` + +... + + +... +``` +v-on 缩写 +``` + +... + + +... +```