Vue简单入门
第一章 简单介绍及入门
0 导入vue包
<!– 开发环境版本，包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
【更推荐开发环境版本，有帮助信息，更为完整】
<!– 生产环境版本，优化了尺寸和速度 –> <script src=”https://cdn.jsdelivr.net/npm/vue”></script>
1 声明式渲染：Vue.js的核心试试允许采用简洁的模板语法来声明式地将第一个例子：数据渲染进DOM的系统：
<div id="app"> {{ message }} </div> <script> var app=new Vue({ el:"#app", data:{ message:"youdianxiangnile,zhangmin!" } }) </script>
第二个例子：
<span v-bind:title=”message”>鼠标悬停查看message信息<span>
其中 v-bind 特性被称为指令，指令带有前缀 v- 是Vue提供的特殊特性。
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒查看此处动态绑定能够的提示信息！
</span>
</div>
<script>
var app2=new Vue({
el:"#app-2",
data:{
message:'页面加载于'+new Date().toLocaleString()
}
})
</script>
第三个例子：
<div id="app3"> {{ message }} <h2>学校名称：{{ school.name }} 。学校电话：{{school.mobile}}</h2> <ul> <li>{{ campus[0] }}</li> <li>{{ campus[1] }}</li> </ul> </div> <script> var app3=new Vue({ el:"#app3", data:{ message:"nihao,xiaozhang!", //定义一个类 school:{ name:"xiaoming", mobile:"400-456-1022" }, //定义一个数组 campus:["武汉校区","重庆校区","成都校区","大同校区"] } }) </script>
注意：
（1）el 挂载点
- Vue 实例的作用范围：vue会管理el命中的元素及其内部的后代元素；
- Vue 可以使用class 等多种选择器，但是一般建议选择id选择器
- Vue 可以设置其他dom元素，如h1 p div，但是不能使用html和body
（2）data 数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守js语法即可
第二章 本地应用
1 内容绑定与事件绑定
（1） v-text
作用是设置标签的内容textContent
默认写法将一个dom标签里面的所有文本进行替换，如果是部分文本替换，建议还使用 两个大括号 哈
<div id="app">
{{ message }}
<h2 v-text="message+'enen1'"></h2>
</div>
（2）v-html
作用是设置元素的innerHTML，内容中有html结构会被解析为标签
<div id="app">
<p v-html="content1"></p>
<p v-html="content2"></p>
<p v-text="content2"></p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
content1:"战胜Frank",
content2:"<a href='https://www.baidu.com/'>百度</a>"
}
})
</script>
（3）v-on
- 为元素绑定事件，其中 v-on可以使用@进行替换，绑定方法可以写在methods属性中，方法内部中数据的获取可以使用this关键字
<div id="app">
<input type="button" value="v-on指令1" v-on:click="doIt" />
<input type="button" value="双击简写2" @dblclick="doIt" />
<h2 @click="changefood">{{ food }}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
food:"番茄炒鸡蛋"
},
methods:{
//doIt 是在制定#app中的制定methods
doIt:function(){
alert("做IT！");
},
//数据更改，this关键字
changefood:function(){
this.food+="炒糊了！"
}
}
})
</script>
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法的时候需要定义形参来接收传入的实参
事件后面跟上 .修饰符 可以对事件进行限制，其中.enter为限制触发的按键为回车
<div id="app">
<button @click="doIt(666,'老铁')">doIt</button>
<input type="text" @keyup.enter="sayHi" />
</div>
<script>
var app=new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log("做IT");
console.log(p1);
console.log(p2);
},
sayHi:function(){
alert("早上好！");
}
}
})
</script>
（4）一个计数器的简单例子
<div id="compute">
<button @click="sub">-</button>
<span>{{ num }}</span>
<button @click="add">+</button>
</div>
<script>
var com=new Vue({
el:"#compute",
data:{
num:1
},
methods:{
add:function(){
if(this.num<10)
{
this.num++;
}
else{
alert("已经达到最大值！");
}
},
sub:function(){
if(this.num>0)
{
this.num--;
}
else{
alert("已经达到最小值！");
}
}
}
})
</script>
（5）v-show
切换元素的显示与不显示，其中还原理是改变style中的display
<div id="app">
<button @click="changeIsShow">切换</button>
<p v-show="isShow">你好呀！</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
changeIsShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
（6）v-if
根据表达式的值（真假）设置元素的显示状态，本质上是通过操纵dom元素来切换显示状态，表达式为true元素存在dom树中，反之则反。
<div id="app">
<button @click="changeIsShow">切换</button>
<p v-if="isShow">你好呀！</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
changeIsShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
（7）v-band 可以直接使用 : 简写
设置元素的属性（src class title），如果是class推荐使用对象的方式来写
<style> .active{ border:1px solid red; } </style> <div id="app"> <img v-bind:src="imgSrc"/> <br /> <img :src="imgSrc" :title="imgTitle+'哈哈哈哈'" /> <br /> <!-- 以判断表达式的方式来写--> <img :src="imgSrc" :class="isActive?'active':''" @click="toggleActive"/> <br /> <!-- 以对象的方式来写，active类名是否生效由isActive决定--> <img :src="imgSrc" :class="{active:isActive}" @click="toggleActive"/> </div> <script> var app=new Vue({ el:"#app", data:{ imgSrc:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3698288116,4248139335&fm=26&gp=0.jpg", imgTitle:"这是一个title", isActive:false }, methods:{ toggleActive:function(){ this.isActive=!this.isActive; } } }) </script>
（8） v-for
根据数据生成列表结构，数据经常和v-for结合使用，
语法 (item,index) in 数据【其中item名字可以改】
数组长度的更新会同步到页面上面，是响应式的
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index+1}} 城市：{{item}}
</li>
</ul>
<button @click="add">加菜</button>
<button @click="remove">减菜</button>
<h2 v-for="it in cai" v-bind:title="it.name">{{it.name}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["北京","大同","成都","重庆"],
cai:[
{name:"番茄炒鸡蛋"},
{name:"青椒土豆丝"}
]
},
methods:{
add:function(){
this.cai.push({name:"干锅花椰菜"});
},
remove:function(){
this.cai.shift();
}
}
})
</script>
（9）v-model
获取和设置表单元素的值（双向数据绑定，更改表单中数据 vue里面值也会改变）
<div id="app">
<button @click="setM">修改值</button>
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{message}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"战神FRANK"
},methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="你是不是傻";
}
}
})
</script>
第三章 网络应用
（1）axios 强大的网络请求库
- axios必须先导入才可以使用，
- 使用get或post方法即可发送对应的请求，
- then方法中的回调函数会在请求成功或失败时触发，
- 通过回调函数的形参可以获取响应的内容，或错误信息
- 官网：https://github.com/axios/axios
需要在头文件导入的包
<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
get和post请求模板
- axios.get(地址?key=value&key2=values)aa.them(function(response){},function(err){})
- axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
（2）axios+vue
- axios回调函数中的this已经改变，无法访问到vue中data的数据，
- 可以将this用一个变量保存起来，直接在回调函数中调用就行了
<div id="app">
<button @click="getJoke">获取笑话</button>
<p>{{joke}}</p>
</div>
<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);
console.log(response.data);
that.joke=response.data;
}),function(err){
console.log(err)
}
}
}
})
</script>
版权声明：本文为weimingai原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。