###引入Vue.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
1`创建Vue.js项目
1`cnpm install vue
//安装稳定版Vue
2`cnpm install --global vue-cli
//创建基于webpack模板新项目
3`vue init webpack my-project
//配置项目名称等 一直enter
4`cd my-project
//进入项目
5`cnpm install
//安装项目
6`cnpm run dev
//启动项目，监听8080端口
2`Vue.js项目目录结构
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
3`Vue 实例
<div id="vue1">
<label>修改颜色</label>//标签
<p>{{ok?"fk":"cc"}}</p>
<input v-model="use" type="checkbox">
<p v-bind:class="{‘class1‘:use}" v-if="ok">Lorem ipsum dolor sit amet.</p>
</div>
<script>
new Vue({
el:"#vue1",
data:{
use:false,
ok:true
}
})
</script>
4`Vue选择器
<script>
new Vue({
el:"#vue1",//el:".vue1" 适用类选择器·ID选择器
5`Vue指令
1·v-text传输替换文本值
写法：
①
②<h2>毕节{{message}}</h2>//部分替换
2·v-html传输替换html标签
写法:
#<p v-html=‘content‘></p>//html中
#data:{content:’.com}
3`v-on或者@为元素绑定事件
写法：
①#<input v-on:事件名=’方法’>//html中
#methods:{方法:function(){}}//js中
②#<input @事件名=’方法’>//html中
#methods:{方法:function(){}}//js中
实例：
#<!-- 与用户交互v-on -->
<div id="app">
<p>{{message}}</p>
<button v-on:click=‘remove‘>点击翻转</button>
</div>
<script>
var app = new Vue({
el:‘#app‘,
data:{
message:‘Hello‘
},
methods: {
remove:function(){
this.message = this.message.split(‘‘).reverse().join(‘‘)
}
}
})
</script>
事件名：
1`click
2`monseenter
3`dbclick
4`…
4`v-show以真假决定显示隐藏
写法：
#<img v-show=‘布尔值(t/f)/age>=18‘>//html中
#data:{isShow:true}//js中，通过改变isShow决定是否显示(t/f)
实例：
#<!-- v-show实例 -->
<div id="app">
<img src="./my-project/build/logo.png" v-show=‘isShow‘>
<button @click=‘change‘>改变</button>
</div>
<script>
var app = new Vue({
el:‘#app‘,
data:{
isShow:false
},
methods: {
change:function(){
this.isShow = !this.isShow;//取反
}
}
})
</script>
5`v-if以真假决定元素的增加删除(操作DOM树)
写法：
类似于v-show
实例:
#<!-- 显示删除元素v-if -->
<div id="app">
<p v-if=‘seen‘>可以看见</p>
</div>
<script>
var app = new Vue({
el:‘#app‘,
data:{
seen: true
}
})
</script>
6`v-bind设置元素的属性（css）
写法：
#<a v-bind:属性名=表达式></a>
#//直接在属性前添加冒号,简写
#<img :class=‘isActive?’active’:’’">//添加类名
实例：
#<!-- v-bind实例 -->
<div id="app">
<img v-bind:src="url">
<p :class="isActive?‘active‘:‘‘" @click=‘change1‘></p>
//三元表达式
<p :class="{active:isActive}" @click=‘change1‘></p>
//简写，同上
<input type="button" @click=‘change‘ value="切换">
</div>
<script>
var app = new Vue({
el:‘#app‘,
data:{
url:‘./my-project/build/logo.png‘,
isActive:true
},
methods: {
change:function(){
this.url= ‘./mario.jpg‘
},
change1:function(){
this.isActive = !this.isActive;
}
}
})
</script>
7`v-for根据数据生成列表结构
写法：
#<ul><li v-for=‘item in arr‘></li></ul>//html
#data:{arr:[1,2,3,4,5]}}//js
实例:
#<!-- v-for实例 -->
<div id="app">
<input type="button" value="增加" @click=‘add‘>
<input type="button" value="减少" @click=‘remove‘>
<ul>
<li v-for=‘(acc,index) in arr‘>
{{acc}} {{index}} foresthan.com
</li>
</ul>
<h2 :title=‘Hello‘ v-for=‘bcc in bcc‘>
{{bcc}}
</h2>
</div>
<script>
var app = new Vue({
el:‘#app‘,
data:{
arr:[1,2,3,4,5],
Hello:‘hello‘,
bcc:[1,2,3]
},
methods: {
add:function(){
this.arr.push(‘!‘)
},
remove:function(){
this.arr.shift();
}
}
})
</script>
8`v-on补充-传递自定义参数，事件修饰符
写法:
#<input @事件名=‘方法（形参）’>//html
#metods:{方法：function(形参)}//js传递自定义参数
#<input @事件名.事件修饰=’方法’>//事件修饰符
实例：
#<!-- 与用户交互v-on -->
<div id="app">
<p>{{message}}</p>
<button v-on:click=‘remove‘>点击翻转</button>
</div>
<script>
var app = new Vue({
el:‘#app‘,
data:{
message:‘Hello‘
},
methods: {
remove:function(){
this.message = this.message.split(‘‘).reverse().join(‘‘)
}
}
})
</script>
#<!-- v-on补充实例 -->
<div id="app">
<input type="button" value="点击" @click="doIt(666,‘老铁‘)">
<input type="text" @keyup.enter=‘keyup‘>
</div>
<script>
var app = new Vue({
el:‘#app‘,
methods: {
doIt:function(p1,p2){
console.log(‘ok‘)
console.log(p1)
console.log(p2)
},
keyup:function(){
console.log(‘吃了没‘)
}
}
})
</script>
9`v-model获取设置表单元素的值（双向绑定）
写法：
#<input v-model=‘message‘>//html
实例:
3<!-- v-model双向绑定 -->
<div id="app">
<p>{{message}}</p>
<input type="text" v-model=‘message‘ @keyup.enter=‘get‘>
</div>
<script>
var app = new Vue({
el:‘#app‘,
data:{
message:‘Hello‘
},
methods: {
get:function(){
console.log(this.message)
}
}
})
</script>
6`Vue实例
1·计数器
#<!-- 计数器案例 -->
<div id="app">
<button @click=‘cut‘>-</button>
<span>{{message}}</span>
<button @click=‘add‘>+</button>
</div>
<script>
var app = new Vue({
el:‘#app‘,
data:{
message:0
},
methods: {
cut:function(){
if(this.message>0){
this.message--
}else{
console.log(‘太小了‘)
}
},
add:function(){
if(this.message<10){
this.message++
}else{
console.log(‘太大了‘)
}
}
}
})
</script>
2`图片切换
#<!-- 图片切换实例 -->
<div id="app">
<img :src="isArr[index]">
<button @click=‘up‘ v-show=‘index!=0‘>上一张</button>
<button @click=‘down‘ v-show=‘index!=3‘>下一张</button>
</div>
<script>
var app = new Vue({
el:‘#app‘,
data:{
isArr:[
"./mario.jpg",
"./luiji.jpg",
"./blue.jpg",
"./pink.jpg"
],
isShow1:false,
isShow2:true,
index:0
},
methods: {
up:function(){
this.index--
},
down:function(){
this.index++
}
}
})
</script>
3`记事本
#<!-- 记事本实例 -->
<div id="app">
<section>
<input type="text" v-model=‘inputValue‘ @keyup.enter=‘login1‘ placeholder="hello">
<section v-show="list.length!=0">
<ul>
<li v-for=‘(item,index) in list‘>
<div>
<span>{{index+1}}</span>
<label>{{item}}</label>
<button @click=‘dis(index)‘ >删除</button>
</div>
</li>
</ul>
<p>行数{{list.length}}</p>
<div>
<button @click=‘err‘>清空</button>
</div>
</section>
</section>
</div>
<script>
var app = new Vue({
el:‘#app‘,
data:{
list:[‘吃饭‘,‘睡觉‘],
inputValue:‘‘,
isIf:true,
},
methods: {
dis:function(index){
this.list.splice(index,1)
},
login1:function(){
this.list.push(this.inputValue);
this.inputValue = ‘‘
},
err:function(){
this.list = []
}
}
})
</script>
7`axios
#axiosjs包导入 #<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
1`GET方法
#
document.querySelector(‘.get‘).onclick = function (){
axios.get(‘https://autumnfish.cn/api/joke/list?num=3‘).then(function(response){
console.log(response)
},function(err){
console.log(err)
})
}//问号后接参数
2`POST方法
#
document.querySelector(‘.post‘).onclick = function() {
axios.post(‘https://autumnfish.cn/api/user/reg‘,{username:‘jack‘}).then(function(response){
console.log(response)
},function(err){
console.log(err)
})
}
8`axios+vue
<!-- axios+vue案例 -->
<div id="app">
<input type="button" value="获取笑话" @click=‘getJoke‘>
<p>{{joke}}</p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el:‘#app‘,
data:{
joke:‘这是一个笑话‘
},
methods: {
getJoke:function(){
var that = this;
axios.get(‘https://autumnfish.cn/api/joke/‘).then(function (response) {
console.log(response.data)
that.joke = response.data;
})
}
}
})
</script>
1`天气查询案例
#<!-- 天知道案例(axios+vue) -->
<div id="app">
<div class="search_form">
<div><h1>天知道</h1></div>
<div class="form_group">
<input type="text" @keyup.enter=‘search‘ v-model=‘city‘>
<input type="button" value="查询" @click=‘search‘>
</div>
<a @click="inSearch(‘北京‘)">北京</a>
<a @click="inSearch(‘上海‘)">上海</a>
<a @click="inSearch(‘广州‘)">广州</a>
<a @click="inSearch(‘深圳‘)">深圳</a>
</div>
<ul class="weather_list">
<li v-for=‘item in weatherList‘>
<div><span>{{item.date}}</span></div>
<div><span>{{item.high}}</span></div>
<div><span>{{item.low}}</span></div>
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>