1.介绍
简单来说，Vue是一套渲染UI的强大前端框架。
官网地址:https://cn.vuejs.org/
2.主要特性：
- 学习曲线非常平缓，只要有html/css，js基础即可上手
- 响应式的支持，让我们从传统的JQuery的面向DOM编程，转变为面向数据编程
- 丰富的语法支持
- 优雅的单文件组件
- 完善的组件动画支持
- 成熟的生态，比如vue-cli，VueRouter，Vuex等相关配套的工具
其中，最重要最核心的特性就是：响应式和组件化。
3.安装
官方文档：https://cn.vuejs.org/
4.根据官方文档的语法，自己实现一个ToDoList。
<body>
<div id="app">
<h3>添加今日要完成任务</h3>
<input type="text" v-model="currentInput" /><button @click="handleAdd">添加</button>
<ul>
<li v-for="item in todos" :class="{done:item.isDone}" >
{{item.text}}
<button @click="handleComplete(item)" >标记完成</button>
<button @click="handleDelete(item)">删除</button>
</li>
</ul>
</div>
</body>
<style>
.done{
background-color: red;
}
</style>
<script>
let vm = new Vue({
el:'#app',
data:{
todos:[],
currentInput:""
},
methods:{
handleAdd(){
//判断是否为空
if(this.currentInput === ""){
return ;
}
//检查是否有重复的内容
for(let i=0;i<this.todos.length;i++){
//数组中的每一项
let item = this.todos[i];
//判断是否有重复
if(item.text === this.currentInput){
return;
}
}
//获取输入项的内容,将输入项的内容存到todos
this.todos.push({text:this.currentInput,isDone:false});
//清空输入项的内容
this.currentInput = ""
},
handleComplete(item){
item.isDone = true;
},
handleDelete(item){
//从todos中删除这个item
let index = this.todos.indexOf(item);
//调用数组中删除的方法
this.todos.splice(index,1);
}
}
});
</script>
</html>
5.组件注册：组件的注册有全局注册和局部注册两种方式。全局不适用，这里不举例，具体可看官网。
<script>
<!--定义局部组件-->
let TitleBar = {
name:'title-bar',
template:`<div><h1>{{title}}标题部分</h1></div>`,
data(){
return {
title:'首页'
}
}
}
/*定义一个局部组件*/
let MenuBar = {
name:'menu-bar',
template:`<div><h1>底部菜单部分</h1></div>`
}
//根实例
let vm = new Vue({
el:'#app',
components:{
TitleBar,
MenuBar
}
});
</script>
6.父子组件数据通信：从父到子，用props；从子到父，用$emit。
<div id="app">
<ul>
<li v-for="item,index in list"><todo-item :content="item" :index='index' @delete-item="handleDeleteItem"></todo-item></li>
</ul>
<child :text="text"></child>
</div>
<script>
// 全局注册
Vue.component("todo-item", {
props:['content','index'],
data() {
return {
}
},
template: "<div @click='handlerClick'>{{content}}</div>",
methods: {
handlerClick(){
this.$emit("delete-item", this.index);
}
}
});
// 子组件不要去直接修改父组件的数据
Vue.component("child", {
props:['text'],
data() {
return {
myText: this.text
}
},
template: "<div @click='changeText'>{{myText}}</div>",
methods: {
changeText(){
this.myText = "修改了的文字";
}
}
});
let vue = new Vue({
el: "#app",
data: {
list: [
"吃饭", "睡觉", "打豆豆"
],
text: "文字"
},
methods:{
handleDeleteItem(index){
this.list.splice(index, 1);
}
}
});
</script>
- 其余知识点可参考官方文档。
以下介绍Vue-cli
1.介绍：
Vue-cli就为了做项目开发问题而生的，它给我们打包好了所有能用到的好工具，提供一个开箱即用的项目开发环境。所以，我们需要用它来创建项目。
2.资源：
vue-cli官网：https://cli.vuejs.org/，官网写的是3.0版本的使用，2.xx才是稳定版。
vue-cli github主页：https://github.com/vuejs/vue-cli
3.创建工程
npm install -g vue-cli
vue init webpack xxx
?Project name lottery
?Project description this is a niubility project
?Author xiaokaikai
?Vue build (选择一种构建的形式)
> Runtime + Compiler: recommended for most users
?Install vue-router?(Y/n) Y --这里说是否安装路由插件
?Use ESLint to lint your code? N-- 是否检查代码格式
?Pick an ESLint preset Standard -- 选择一种代码检查的规范
?Set up unit tests N 是否进行单元测试
?Setup e2e tests with Nightwatch N 是否使用e2e工具进行构建
?Should we run 'npm install' for you after the project has been created? npm --选择npm方式安装
输入完成之后,工具就开始构建我们的工程啦!
4.工程目录结构
- build：构建相关目录
- config：开发相关配置
- src：要编写的代码
- static：不需要webpack处理的静态文件，比如压缩后的资源,可以直接访问
5.Vue-Router
传统的路由是后端来做，简单说就是请求一个url，后端根据请求的参数内容渲染出相应的html返回。由于JS可以感知到浏览器URL的变化，因此可以做到在url变化的时候去加载不同的DOM内容，这就是前端路由，和后端没有任何关系了。
单页应用(SPA)的用户体验比传统的多页应用要好很多，所以越来越多的公司开始尝试单页应用。单页应用就将原来的多个页面做成一个html，JS根据url的变化切换DOM的内容。这样不用再去请求服务器的整个html内容，只需要请求对应的json数据，因此速度会快很多。
Vue-Router为前端路由提供了封装和简化，并结合组件的使用。让我们可以一个url对应一个组件，轻松编写大型的SPA应用。
<router-view> 显示当前路径所对应的组件内容
<router-link to="要跳转去的组件的路径">
自己基本小总结，具体参考文档资料，文档比较全，又是中文的。
根实例 : let vm = new Vue({参数})
el
template
data
methods
computed
watch
props
生命周期钩子
vue中属性
v-model
v-show
v-if
v-else-if
v-else
v-for
v-html
v-text
使用属性: :属性名称
绑定事件:@事件名称
全局组件和局部组件
父子组件之间通讯
父-->子 : props
子 --> 父: $emit(事件名称)
@click.native 组件绑定原生事件
动态组件: <component :is=组件的名称
