前端学习历程--vue

---恢复内容开始---

一、对比其他框架

1、react:

共同点:

  • 使用 Virtual DOM
  • 提供了响应式(Reactive)和组件化(Composable)的视图组件。
  • 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。
  • react路由使用redux,vue也用了类似的vuex

不同点:

  • vue更轻量级,react社区更强大
  • vue自动获得了 shouldComponentUpdate避免重复渲染
  • 在处理动画时,Vue 每秒最高处理 10 帧,而 React 每秒最高处理不到 1 帧(由于 React 有大量的检查机制,这会让它提供许多有用的警告和错误提示信息。我们同样认为这些是很重要的,但是我们在实现这些检查时,也更加密切地关注了性能方面)。
  • react的jsx使一切都变为js,vue仍使用template(也支持jsx),这会更易读,易迁移
  • Vue 可以让你在每个单文件组件中完全访问 CSS

前端学习历程--vuescoped 属性会自动添加一个唯一的属性(比如 data-v-21e5b78)为组件内 CSS 指定作用域,编译的时候.list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover

  • vue-cli和create-react-app都包含了webpack,但Vue 支持 Yeoman-like 定制

2、angular1

相同点:

  • 写法与ng几乎相同

不同点:

  • 更灵活,也更简单
  • 在 Vue 中指令和组件分得更清晰
  • Vue 有更好的性能,并且非常非常容易优化,因为它不使用脏检查,vue使用基于依赖追踪的观察系统并且异步队列更新,所有的数据变化都是独立触发,除非它们之间有明确的依赖关系。和ng2中解决watcher过多办法一致。

3、angular2

  • ng2基于ts开发, ts静态类型检查在大规模的应用中非常有用,但中型项目不合适

二、使用

1、hello world

---恢复内容结束---

一、对比其他框架

1、react:

共同点:

  • 使用 Virtual DOM
  • 提供了响应式(Reactive)和组件化(Composable)的视图组件。
  • 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。
  • react路由使用redux,vue也用了类似的vuex

不同点:

  • vue更轻量级,react社区更强大
  • vue自动获得了 shouldComponentUpdate避免重复渲染
  • 在处理动画时,Vue 每秒最高处理 10 帧,而 React 每秒最高处理不到 1 帧(由于 React 有大量的检查机制,这会让它提供许多有用的警告和错误提示信息。我们同样认为这些是很重要的,但是我们在实现这些检查时,也更加密切地关注了性能方面)。
  • react的jsx使一切都变为js,vue仍使用template(也支持jsx),这会更易读,易迁移
  • Vue 可以让你在每个单文件组件中完全访问 CSS

前端学习历程--vuescoped 属性会自动添加一个唯一的属性(比如 data-v-21e5b78)为组件内 CSS 指定作用域,编译的时候.list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover

  • vue-cli和create-react-app都包含了webpack,但Vue 支持 Yeoman-like 定制

2、angular1

相同点:

  • 写法与ng几乎相同

不同点:

  • 更灵活,也更简单
  • 在 Vue 中指令和组件分得更清晰
  • Vue 有更好的性能,并且非常非常容易优化,因为它不使用脏检查,vue使用基于依赖追踪的观察系统并且异步队列更新,所有的数据变化都是独立触发,除非它们之间有明确的依赖关系。和ng2中解决watcher过多办法一致。

3、angular2

  • ng2基于ts开发, ts静态类型检查在大规模的应用中非常有用,但中型项目不合适

二、使用

1、hello world

前端学习历程--vue

2、绑定dom元素

前端学习历程--vue

3、v-on

前端学习历程--vue

4、组件注册

前端学习历程--vue

5、props组件接收属性

前端学习历程--vue

可以使用 v-bind 指令将待办项传到每一个重复的组件中

前端学习历程--vue前端学习历程--vue

三、vue实例

1、构造器

前端学习历程--vue

组件构造器

前端学习历程--vue

2、构造函数的对象与data对象相互作用

前端学习历程--vue

3、$前缀:与构造函数中名称区分

前端学习历程--vue

4、没有控制器概念,逻辑放在生命周期钩子中

前端学习历程--vue如 mounted、 updated 、destroyed

四、模板语法

1、vue底层将html编译为虚拟dom,也支持直接在render中写jsx

2、v-html中可以存放拼接模板,但不安全

3、使用js表达式

前端学习历程--vue

4、过滤器

前端学习历程--vue只能在这两个地方使用

5、缩写

前端学习历程--vue前端学习历程--vue

五、计算属性

1、模板表达式中需表达复杂逻辑时使用  计算属性

  前端学习历程--vue前端学习历程--vue

reversedMessage就是计算属性,且依赖message

2、计算属性 vs methods

前端学习历程--vuemethods没有缓存机制,不管message是否改变,都执行函数,计算属性如果message不变,不会重新执行函数

3、computed vs watched

前端学习历程--vue

前端学习历程--vue  前端学习历程--vue

4、计算setter

前端学习历程--vue运行 vm.fullName = 'John Doe' 时, setter 会被调用, vm.firstName 和 vm.lastName 也相应地会被更新。

5、watch:停止等待输入完毕

前端学习历程--vue

前端学习历程--vue

前端学习历程--vue使用 watch 选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这是计算属性无法做到的。

<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
  // 如果 question 发生改变,这个函数就会运行
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
  // _.debounce 是一个通过 lodash 限制操作频率的函数。
  // 在这个例子中,我们希望限制访问yesno.wtf/api的频率
  // ajax请求直到用户输入完毕才会发出
  // 学习更多关于 _.debounce function (and its cousin
// _.throttle), 参考: https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
var vm = this
if (this.question.indexOf('?') === -1) {
vm.answer = 'Questions usually contain a question mark. ;-)'
return
}
vm.answer = 'Thinking...'
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
// 这是我们为用户停止输入等待的毫秒数
500
)
}
})
</script>
 
六、class与style绑定
1、v-bind:class:同ng-class
前端学习历程--vue表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。
我们也可以在对象中传入更多属性用来动态切换多个 class 。此外, v-bind:class 指令可以与普通的 class 属性共存。
前端学习历程--vue      前端学习历程--vue 前端学习历程--vue

页可以这样写

前端学习历程--vue 前端学习历程--vue

也可以在这里绑定返回对象的计算属性

前端学习历程--vue 前端学习历程--vue

2、v-bind:style绑定内联样式

前端学习历程--vue

七、条件渲染

1、v-if

前端学习历程--vue

2、v-if条件组

前端学习历程--vue

八、列表渲染

1、v-for

持一个可选的第二个参数为当前项的索引。

前端学习历程--vue  前端学习历程--vue

2、整数迭代

前端学习历程--vue

3、key

前端学习历程--vue

九、事件处理v-on

1、基本使用

前端学习历程--vue 前端学习历程--vue

十、表单控制 v-model

1、基本使用

前端学习历程--vue

2、单选框

前端学习历程--vue

3、复选框

前端学习历程--vue

4、单选按钮

前端学习历程--vue

5、单选列表

前端学习历程--vue

6、多选列表

前端学习历程--vue

 
 
上一篇:hdu5521(Meeting)spfa 层次网络最短路


下一篇:Python_socket_UDP