前端学习历程--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

scoped 属性会自动添加一个唯一的属性（比如 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

scoped 属性会自动添加一个唯一的属性（比如 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

2、绑定dom元素

3、v-on

4、组件注册

5、props组件接收属性

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

三、vue实例

1、构造器

组件构造器

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

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

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

如 mounted、 updated 、destroyed

四、模板语法

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

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

3、使用js表达式

4、过滤器

只能在这两个地方使用

5、缩写

五、计算属性

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

　　

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

2、计算属性 vs methods

methods没有缓存机制，不管message是否改变，都执行函数，计算属性如果message不变，不会重新执行函数

3、computed vs watched

  

4、计算setter

运行 vm.fullName = 'John Doe' 时， setter 会被调用， vm.firstName 和 vm.lastName 也相应地会被更新。

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

使用 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

表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。

我们也可以在对象中传入更多属性用来动态切换多个 class 。此外， v-bind:class 指令可以与普通的 class 属性共存。

       

页可以这样写

 

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

 

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

七、条件渲染

1、v-if

2、v-if条件组

八、列表渲染

1、v-for

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

  

2、整数迭代

3、key

九、事件处理v-on

1、基本使用

 

十、表单控制 v-model

1、基本使用

2、单选框

3、复选框

4、单选按钮

5、单选列表

6、多选列表