diff --git "a/\351\273\204\345\213\207\350\276\211/Note-2021-5-25.md" "b/\351\273\204\345\213\207\350\276\211/Note-2021-5-25.md" new file mode 100644 index 0000000000000000000000000000000000000000..f2fb7430b8380011e5d337995e70affa7e1dc660 --- /dev/null +++ "b/\351\273\204\345\213\207\350\276\211/Note-2021-5-25.md" @@ -0,0 +1,144 @@ +## 今日笔记 +## vuejs +开发版本 包含了有帮助的命令行警告 +生产版本 去掉了警告 + +## data有三种写法 +写法一：对象 +　　data: { msg: 'hello' 　　} +写法二：函数 +　　data: function () { return { 　msg: 'hello' } 　　} +写法三：函数的ES6写法 +　　data(){ 　　　　return { 　msg: 'hello' } 　　} + +在引入vue的后面在写一个script标签 +## 表单 +``` + + + + + + + Document + + +
+
    +
  1. + {{ todo.text }} +
    2. +
+
+ + + + +``` ++ 在控制台里（浏览器），输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。 + +## 处理用户输入 ++ 为了让用户和应用实现交互，我们用 v-on 指令添加一个时间监听器，通过这个指令调用在vue实例中定义的方法 ++ v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。 + +vue的{{ }}第一个是用来绑定数据的；可以是 + +1. 表达式 +2. 字符串 +3. 函数 +4. 正则表达式 +5. boolean +6. … +``` + + + + + + + Document + + + +
+
    + +
  1. + {{ todo.text }} +
    2. +
+ +
+ + + + + + + + + +
+
+ + + + +
+ + + + + +``` +``` +标签 +第一种用法： +
+ + +第二种用法：点击文本时获是触发控件。 + + + +``` +标签 +第一种用法： +
+ \ No newline at end of file diff --git "a/\351\273\204\345\213\207\350\276\211/Note-2021-5-26.md" "b/\351\273\204\345\213\207\350\276\211/Note-2021-5-26.md" new file mode 100644 index 0000000000000000000000000000000000000000..fee599c59e856228840de4ef4f78160bcea37c51 --- /dev/null +++ "b/\351\273\204\345\213\207\350\276\211/Note-2021-5-26.md" @@ -0,0 +1,51 @@ +## 今日笔记 + +## 定义标签 +
+//绑定一个单击事件 + +//给这个标签绑定v-bind指令 +

改变背景色

+
+ + +## if-else条件判断 for循环 +computed属性：computed依赖data里的变量，绑定username，password；computed中的msg方法返回实现双向绑定 + + + + + + +### 组件化应用构建 + +
+
    + + +
+
+Vue.component('todo-item', { + props: ['todo'], + template: '
  • {{ todo.text }}
    • ' +}) + +var app7 = new Vue({ + el: '#app-7', + data: { + groceryList: [ + { id: 0, text: '蔬菜' }, + { id: 1, text: '奶酪' }, + { id: 2, text: '随便其它什么人吃的东西' } + ] + } +}) \ No newline at end of file diff --git "a/\351\273\204\345\213\207\350\276\211/Note-2021-5-28.md" "b/\351\273\204\345\213\207\350\276\211/Note-2021-5-28.md" new file mode 100644 index 0000000000000000000000000000000000000000..07fe09fcd7ad1f56afbd7221e80e3f87f8e3271a --- /dev/null +++ "b/\351\273\204\345\213\207\350\276\211/Note-2021-5-28.md" @@ -0,0 +1,53 @@ +## 今日笔记 + +## 创建一个 Vue 实例 + +每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： + +var vm = new Vue({ + // 选项 +}) + + +### 数据与方法\ + +当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 +``` + +``` +## 添加属性 + + var data={name:"黎明",age:11,height:null} ; + var vm=new Vue({ + el:"#app", + data:data + }) + data.height=111; +``` + +## 实例生命周期钩子 + +每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 + +比如 created 钩子可以用来在一个实例被创建之后执行代码： + +new Vue({ + data: { + a: 1 + }, + created: function () { + // `this` 指向 vm 实例 + console.log('a is: ' + this.a) + } +}) +// => "a is: 1" \ No newline at end of file diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-5-28 8-40-33.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-5-28 8-40-33.JPG" new file mode 100644 index 0000000000000000000000000000000000000000..cf7c457469181ba424df8667ff8d8d7cedaafb21 Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-5-28 8-40-33.JPG" differ diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-21-47.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-21-47.JPG" new file mode 100644 index 0000000000000000000000000000000000000000..aa443a7a36e63568d5b362881f25dbacb529c73d Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-21-47.JPG" differ diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-35-32.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-35-32.JPG" new file mode 100644 index 0000000000000000000000000000000000000000..cf947c52fdb90d2e57d121822faa299ff2b662b5 Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-35-32.JPG" differ diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-40-17.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-40-17.JPG" new file mode 100644 index 0000000000000000000000000000000000000000..03571a62f9b38ca97c7d4fb80e33915fd4b2814d Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-40-17.JPG" differ diff --git "a/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-40-30.JPG" "b/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-40-30.JPG" new file mode 100644 index 0000000000000000000000000000000000000000..88ca099150cf271a7e9acde742d476e5dbda0ad2 Binary files /dev/null and "b/\351\273\204\345\213\207\350\276\211/img/2021-5-28 9-40-30.JPG" differ