diff --git "a/\346\270\270\346\265\267\346\236\227/2021-05-25-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-05-25-vue.md" new file mode 100644 index 0000000000000000000000000000000000000000..f5e768919b1c0568ad8082a4d07b2dcd11213bba --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-05-25-vue.md" @@ -0,0 +1,97 @@ +# vue笔记 + +### 前端三大框架 + +1. Angular + ++ 它最大的特点是把后端的一些开发模式移植到前端来实现，如MVC、依赖注入等。 + +2. React + ++ VirtualDOM、JSX、Diff算法等，支持ES6语法，采用函数式编程，门槛稍高，但也更灵活，能让开发具有更多可能性。 + +3. Vue + ++ 特点：如VirtualDOM、双向数据绑定、diff算法、响应式属性、组件化开发等，并做了相关优化，使其使用起来更加方便，更容易上手，比较少适合初学者。 + + +### 声明式渲染 + +``` +
+ {{ message }} +
+``` +``` +var app = new Vue({ + el: '#app', + data: { + message: 'Hello Vue!' + } +}) +``` +用v-bind来绑定节点 + +``` +
+ + 鼠标悬停几秒钟查看此处动态绑定的提示信息！ + +
+``` + +``` +var app2 = new Vue({ + el: '#app-2', + data: { + message: '页面加载于 ' + new Date().toLocaleString() + } +}) +``` + + +可以通过输入 app2.message = ''来改变节点的值 + ++ v-bind 主要用于属性绑定，Vue官方提供了一个简写方式 :bind，例如： + +``` + + + + +``` + ++ v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。 + + 示例： + +``` + + + + + + + +
+
+
+ +
+
+ +
+ +
+ + + + + + + +``` +### 条件与循环 + +1. 使用V-if="seen",通过改变seen等于false或true来决定是否让节点显示 + diff --git "a/\346\270\270\346\265\267\346\236\227/2021-05-26-vue.md" "b/\346\270\270\346\265\267\346\236\227/2021-05-26-vue.md" new file mode 100644 index 0000000000000000000000000000000000000000..035b47f7766da1918dbcba05de5d56023b89e140 --- /dev/null +++ "b/\346\270\270\346\265\267\346\236\227/2021-05-26-vue.md" @@ -0,0 +1,70 @@ +# vue处理用户输入和组件化笔记 + + +### 处理用户输入 + +1. 可以用v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法： + +``` +
+

{{ message }}

+ +
+``` +``` +var app5 = new Vue({ + el: '#app-5', + data: { + message: 'Hello Vue.js!' + }, + methods: { + reverseMessage: function () { + this.message = this.message.split('').reverse().join('') + } + } +}) +``` + +2. 也可以用 v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。 + +``` + + + + v-on + + + +
+ {{msg}} + +
+ + + +``` + + +### 组件化 + +1. 理解：如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。 + +2. 注册组件 + ++ Vue.extend()： + +调用Vue.extend()创建的是一个组件构造器。通常在创建组件构造器时，传入template代表我们自定义组件的模板。该模板就是在使用到组件的地方，要显示的HTML代码。事实上，这种写法在Vue2.x的文档中几乎已经 +看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。 + ++ Vue.component()： + +调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。所以需要传递两个参数：1、注册组件的标签名 2、组件构造器 + ++ 组件必须挂载在某个Vue实例下，否则它不会生效。