一、技术概述
- 什么是Vue
Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- 学习Vue的原因
-
简单易学
-
语法很自由
- Vue的技术难点
-
父子组件的双向数据绑定,所以在子组件是不允许修改父组件的属性的。
-
props 的 数组／对象的默认值应当由一个工厂函数返回
二、技术详述
- Vue的使用
- vue的代码
<body>
<div id="app">
<p>{{ note }}</p>
<input type="text" v-model="note">
</div>
</body>
// js
var vm = new Vue({
el: '#app',
data: {
note: ''
}
})
- 绑定click事件
<a v-on:click="doSomething"></a>
- 绑定动态属性
<a v-bind:href="url"></a>
三、技术使用中遇到的问题和解决过程
-
问题一：安装问题，提示没有安装python 、build失败等
解决方案：因为一些 npm 的包安装需要编译的环境,将window 用户依赖 visual studio 的一些库和python 2+等安装后问题解决。
-
问题二：声明click/on-click的方法找不到
解决方案：在后来发现是因为click/on-click的方法 没有写到methods:{ }里面。
<router-link :to="item.menuUrl" @click="toggleName=''">
<i :class="['fzicon',item.menuIcon]"></i>
<span>{{item.menuName}}</span>
</router-link>
<router-link :to="item.menuUrl" @click.native="toggleName=''">
<i :class="['fzicon',item.menuIcon]"></i>
<span>{{item.menuName}}</span>
</router-link>
四、总结
-
在学习新知识时要先打好基础，尽量在学习之前先将预备知识学完。
-
在基础阶段要学得扎实，否则容易导致后期频繁出现低级错误。
-
遇到难题不要自己一个人纠结太久，及时向他人请教可以避免浪费时间。