Vue实战之基本语法
1. Vue 引言
渐进式
JavaScript 框架 --摘自官网
# 渐进式
1. 易用 html css javascript
2. 高效 开发前端页面 非常高效
3. 灵活 开发灵活 多样性
# 总结
Vue 是一个javascript 框架
# 后端服务端开发人员:
Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 双向绑定 MVVM
注意: 日后在使用Vue过程中页面中不要在引入Jquery框架
htmlcss--->javascript ----->jquery---->angularjs -----> Vue
# Vue 作者
尤雨溪 国内的
2. Vue入门
2.1 下载Vuejs
//开发版本:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产版本:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.2 Vue第一个入门应用
<div id="app">
{
{ msg }} {
{username}} {
{pwd}}
<br>
<span>
{
{ username }}
<h1>{
{ msg }}</h1>
</span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue实例定义一个作用范围
data:{ //用来给Vue实例定义一些相关数据
msg:"百知欢迎你,期待你的加入!",
username:"hello Vue!",
pwd :"12345",
},
});
</script>
# 总结: 1.vue实例(对象)中el属性: 代表Vue的作用范围 日后在Vue的作用范围内都可以使用Vue的语法 2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{ {变量名}}在Vue作用范围内取出 3.在使用{ {}}进行获取data中数据时,可以在{ {}}中书写表达式,运算符,调用相关方法,以及逻辑运算等 4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器
3. v-text和v-html
3.1 v-text
v-text
:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText
<div id="app" class="aa">
<span >{
{ message }}</span>
<span v-text="message"></span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"百知欢迎您"
}
})
</script>
# 总结 1.{ {}}(插值表达式)和v-text获取数据的区别在于 a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据 b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁
3.2 v-html
v-html
:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML
<div id="app" class="aa">
<span>{
{message}}</span>
<br>
<span v-text="message"></span>
<br>
<span v-html="message">xxxxxx</span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"<a href=''>百知欢迎您</a>"
}
})
</script>
4.vue中事件绑定(v-on)
4.1 绑定事件基本语法
<div id="app">
<h2>{
{message}}</h2>
<h2 v-text="message"></h2>
<h2>年龄:{
{ age }}</h2>
<br>
<input type="button" value="点我改变年龄" v-on:click="changeage">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello 欢迎来到百知课堂!",
age:23,
},
methods:{ //methods 用来定义vue中时间
changeage:function(){
alert('点击触发');
}
}
})
</script>
# 总结: 事件 事件源:发生事件dom元素 事件: 发生特定的动作 click.... 监听器 发生特定动作之后的事件处理程序 通常是js中函数 1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click 2.在v-on:事件名的赋值语句中是当前时间触发调用的函数名 3.在vue中事件的函数统一定义在Vue实例的methods属性中 4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据
4.2 Vue中事件的简化语法
<div id="app">
<h2>{
{ age }}</h2>
<input type="button" value="通过v-on事件修改年龄每次+1" v-on:click="changeage">
<input type="button" value="通过@绑定时间修改年龄每次-1" @click="editage">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app", //element: 用来指定vue作用范围
data:{
age:23,
}, //data : 用来定义vue实例中相关数据
methods:{
changeage:function(){
this.age++;
},
editage:function(){
this.age--;
}
} //methods: 用来定义事件的处理函数
});
</script>
# 总结: 1.日后在vue中绑定事件时可以通过@符号形式 简化 v-on 的事件绑定
4.3 Vue事件函数两种写法
<div id="app">
<span>{
{count}}</span>
<input type="button" value="改变count的值" @click="changecount">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
count:1,
},
methods:{
/*changecount:function(){
this.count++;
}*/
changecount(){
this.count++;
}
}
});
</script>
# 总结: 1.在Vue中事件定义存在两种写法 一种是 函数名:function(){} 推荐 一种是 函数名(){} 推荐
4.4 Vue事件参数传递
<div id="app">
<span>{
{count}}</span>
<input type="button" value="改变count为指定的值" @click="changecount(23,'xiaohei')">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
count:1,
},
methods:{
//定义changecount
changecount(count,name){
this.count = count;
alert(name);
}
}
});
</script>
# 总结: 1.在使用事件时,可以直接在事件调用出给事件进行参数传递,在事件定义出通过定义对应变量接收传递的参数
5.v-show v-if v-bind
5.1 v-show
v-show
:用来控制页面中某个标签元素是否展示 底层使用控制是 display 属性
<div id="app">
<!--
v-show: 用来控制标签展示还是隐藏的
-->
<h2 v-show="false">百知教育欢迎你的加入!</h2>
<h2 v-show="show">百知教育欢迎你的加入这是vue中定义变量true!</h2>
<input type="button" value="展示隐藏标签" @click="showmsg">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
show:false,
},
methods:{
//定义时间
showmsg(){
this.show = !this.show;
}
}
})
</script>
# 总结 1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏 2.在v-show中可以通过boolean表达式控制标签的展示课隐藏
5.2 v-if
v-if
: 用来控制页面元素是否展示 底层控制是DOM元素 操作DOM
<div id="app">
<h2 v-if="false">百知教育</h2>
<h2 v-if="show">百知教育欢迎你的加入</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
show:false
},
methods:{
}
});
</script>
5.3 v-bind
v-bind
: 用来绑定标签的属性从而通过vue动态修改标签的属性
<div id="app">
<img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}" src="baizhilogo.jpg" alt="">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"百知教育官方logo!!!!",
showCss:true,
},
methods:{
}
})
</script>
5.4 v-bind 简化写法
vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如
v-bind:属性名
简化之后:属性名
<div id="app">
<img width="300" :title="msg" :class="{aa:showCss}" :src="src" alt="">
<input type="button" value="动态控制加入样式" @click="addCss">
<input type="button" value="改变图片" @click="changeSrc">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"百知教育官方logo!!!!",
showCss:true,
src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583490365568&di=52a82bd614cd4030f97ada9441bb2d0e&imgtype=0&src=http%3A%2F%2Fimg.kanzhun.com%2Fimages%2Flogo%2F20160714%2F820a68f65b4e4a3634085055779c000c.jpg"
},
methods:{
addCss(){
this.showCss= !this.showCss;
},
changeSrc(){
this.src = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1925088662,1336364220&fm=26&gp=0.jpg";
}
}
})
</script>
6.v-for的使用
v-for
: 作用就是用来对对象进行遍历的(数组也是对象的一种)
<div id="app">
<span>{
{ user.name }} {
{ user.age }}</span>
<br>
<!--
通过v-for遍历对象
-->
<span v-for="(value,key,index) in user">
{
{index}} : {
{key}} : {
{value}}
</span>
<!--
通过v-for遍历数组
-->
<ul>
<li v-for="a,index in arr" >
{
{index}} {
{a}}
</li>
</ul>
<!--
通过v-for遍历数组中对象
:key 便于vue内部做重用和排序
-->
<ul>
<li v-for="user,index in users" :key="user.id">
{
{index+1}} {
{ user.name }} === {
{ user.age }} ==== {
{ user.content }}
</li>
</ul>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
user:{name:"小陈",age:23},
arr:["北京校区", "天津校区", "河南校区"],
users:[
{id:"1",name:"xiaochen",age:23,content:"我曾经也是一个单纯的少年!"},
{id:"2",name:"小白",age:23,content:"我曾经是一个邪恶的少年!"},
]
},
methods: {}
});
</script>
# 总结 1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key
7 .v-model 双向绑定
v-model
: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制
<div id="app">
<input type="text" v-model="message">
<span>{
{message}}</span>
<hr>
<input type="button" value="改变Data中值" @click="changeValue">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:""
},
methods: {
changeValue(){
this.message='百知教育!';
}
}
});
</script>
# 总结 1.使用v-model指令可以实现数据的双向绑定 2.所谓双向绑定 表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化 称之为双向绑定 # MVVM架构 双向绑定机制 Model: 数据 Vue实例中绑定数据 VM: ViewModel 监听器 View: 页面 页面展示的数据
笔记内容来自百知教育编程不良人