一：安装
方式1：
脚手架安装
#全局安装 vue-cli
npm install vue-cli --global
# 创建一个基于 webpack 模板的新项目
vue init webpack first-vue
# 进入项目，安装依赖，启动项目
cd my-project
npm install
npm run dev
方式2：
直接引入对应的js文件
二：vue基础知识
1、插值表达式 语法：
{{值}} 作用： 将表达式执行的结果 输出当调用元素的innerhtml中；还可以将数据绑定到视图
2、指令-循环指令 基本语法1： <any v-for="tmp in array"></any> 基本语法2： <any v-for="(value,index) in array"></any> 作用： 在遍历array这个集合时，将临时变量保存在tmp中，创建多个any标签
3、指令-选择指令 语法： <any v-if="表达式"></any> <any v-else-if="表达式"></any> <any v-else="表达式"></any> 作用： 根据表达式执行结果的真假，来决定是否要将当前的这个元素 挂载到dom树
我要评论4、指令-事件绑定
语法：
<any v-on:eventname="handleevent"></any>
作用：
给指定的元素 将handleevent的方法绑定给指定eventname事件
5、指令-属性绑定
基本语法：
<any v-bind:myprop="表达式"></any>
补充，支持简写：
<any :myprop="表达式"></any>
作用：
将表达式执行的结果 绑定 到当前元素的myprop属性
<img v-bind:src="'img/'+myimg" alt="">
动态样式绑定
<p :style="{backgroundcolor:mybgcolor}">动态样式绑定</p>
动态样式类绑定
<h1 :class="{myred:false}">动态样式类的绑定</h1>
6、指令-双向数据绑定
方向1：数据绑定到视图
方向2：将视图中（表单元素）用户操作的结果绑定到数据
基本语法:
<表单元素 v-model="变量">
</表单元素>
三：组件化
所谓的组件化，就像玩积木一样，把封装的组件进行复用,把积木（组件）拼接在一起，构成一个复杂的页面应用程序。
组件树就是由各个组件构成的一种数据结构，它存在的意义是为了帮梳理应用程序
1、组件的创建
全局组件
vue.component('my-com',{
template:`
<h2>it is a header</h2>
`
})
局部组件
new vue({
components:{
'my-footer':{
template:''
}
}
})
2、组件使用
作为普通的标签去使用
<my-com></my-com>
3、注意事项
1.组件的id和使用方式 遵循烤串式命名方式：a-b-c
2.如果一个组件 要渲染多个元素，将多个元素放在一个顶层标签中，比如div、form
3.全局组件可以用在id为example的范围内的任何一个组件内部，直接调用可以；但是局部组件只能在父模板中直接调用
四、自定义指令
1、创建和使用
vue.directive('change',{
bind:function(el,bindings){
//首次调用
},
update:function(el,bindings){
//只要是有数据变化，都会调用
},
unbind:function(){
//解绑
}
})
<any v-change="count"></any>
如对本文有疑问， 点击进行留言回复！！
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（一）
Cocos Creator 热更新工具BUG:重启游戏后热更新无效！（已解决）
网友评论