Vue基础 （Vue的本地应用）
【1】学习路线：1、内容绑定，事件绑定2、显示切换，属性绑定3、列表循环，表单元素绑定
一、Vue基础
1、尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：
开发版本
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>生产版本
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
2、el属性
el：挂载点
Vue 命中的范围：el命中的元素及其内部的后代元素
css选择器都可用，但是建议使用id选择器
不要把vue挂载到< html>或者< body>上
3、data：数据对象
Vue用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型的数据时，遵守JS语法即可。
data中可以添加这样的数据类型
data:{
app:"字符串",
school：[1,2,3,4,5,6,7,8 ],
www:{
name:123,
age:21
},
}
4、语法
<body>
<div id="app">
{{message}}
<h1>{{school.name}}
{{school.class}}</h1>
<ul>
<li>{{a[0]}}</li>
<li>{{a[1]}}</li>
<li>{{a[2]}}</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({ //通过var关键字创建一个vue实例
el:"#app", //选择器（最好使用id选择器）
data:{ //对选中的
message:"Hellow Vue !",
school:{
name:"张三",
class:"三班"
},
a:["北京","上海","深圳"]
}
})
</script>
</body>二、vue指令
【1】学习路线：
1、内容绑定，事件绑定
2、显示切换，属性绑定
3、列表循环，表单元素绑定
【2】v-text
设置标签的文本值
<div id="app">
<h1 v-text="message+'!'">你好</h1>
<h2>{{info}}+"!"住在狗熊岭</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"hello!",
info:"熊大"
}
})
</script>【3】v-html
设置标签的 innerHTML（内置HTML）
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
content:"<a href='https://www.baidu.com'>hello</a>"
}
})
</script>【4】v-on指令
为元素绑定事件
v-on：click ------------------------------- @click 单击事件执行
v-on:monseenter ------------------------ @monseenter 鼠标移入执行
v-on:dblclick ------------------------------ @dblclick 双击事件执行
<div id="app">
<input type="button" value="事件绑定" v-on:click="dolt">
<input type="button" value="事件绑定" @click="dolt">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
methods:{
dolt:function(){
alert("hello")
}
}
})
</script>总结：
◆创建Vue示例时: el(挂载点), data(数据), methods(方法)
◆v-on指令的作用是绑定事件,简写为 @
◆方法中通过 this,关键字获取data中的数据
◆v-text指令的作用是:设置元素的文本值,简写为{}
◆v-html指令的作用是:设置元素的innerHTML
【6】v-show指令
根据表达式的真假，切换元素的显示和隐藏
<div id="app">
<input type="button" value="切换显示" @click="down">
<img v-show="show" src="./img/1.jpg" alt="小猫">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
down:function(){
this.show = !this.show;
}
}
})
</script>总结：
◆v-show指令的作用是:根据真假切换元素的显示状态
◆原理是修改元素的display,实现显示隐藏
◆指令后面的内容，最终都会解析为布尔值
◆值为true元素显示，值为false元素隐藏
◆数据改变之后，对应元素的显示状态会同步更新
【7】v-if指令
根据表达值的真假，切换元素的显示和隐藏（操纵DOM元素）
频繁切换的数用v-show , 反之用v-if
<div id="app">
<input type="button" value="切换显示" @click="down">
<p v-if="isShow">hello</p>
<p v-if="isShow">你好</p>
<p v-if="temperature>=30">热死了</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:true
temperature:20
},
methods:{
down:function(){
this.isShow = !this.isShow
}
}
})
</script>总结：
◆v-if指令的作用是:根据表达式的真假切换元素的显示状态
◆本质是通过操纵dom元素来切换显示状态
◆表达式的值为true,元素存在于dom树中,为false,从dom树中移除
【8】v-bind指令
设置元素属性
语法：v-bind : 属性名=表达式
简写： v-bind ： ------------------------------- ：
<body>
<div id="app">
<img v-bind:src="imgSRC">
<img :src="imgSRC" :title="imgtitle+'!!!'" :class="isActive?'active':''" @click="down">
<img :src="imgSRC" :title="imgtitle+'!!!'" :class="{active:isActive}" @click="down">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
imgSRC:"./img/1.jpg",
imgtitle:"hello",
isActive:false
},
methods:{
down:function(){
this.isActive = !this.isActive
}
}
})
</script>
</body>总结：
◆v-bind指令的作用是:为元素绑定属性
◆完整写法是v-bind:属性名
◆简写的话可以直接省略v-bind,只保留:属性名
◆需要动态的增删class建议使用对象的方式
【9】v-for指令
根据数据生成列表结构
<div id="app">
<ul>
<li v-for="item in arr">
{{ item }}
</li>
<li v-for="(it,index) in arr">
{{index+1}}校区：{{it}}
</li>
<li v-for="is in vegetables" :title="is.name">
{{is.name}}
</li>
</ul>
<button @click="add">add</button>
<button @click="remove">shift</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["北京","上海","广州","深圳"],
vegetables:[
{name:"西兰花炒蛋"},
{name:"蛋炒西兰花"}
]
},
methods:{
add:function(){
this.vegetables.push({name:"花菜炒蛋"}) //增加元素
},
remove:function(){
this.vegetables.shift(); //默认移除最左边的元素
}
}
})
</script>总结：
◆v-for指令的作用是:根据数据生成列表结构
◆数组经常和v-for结合使用
◆语法是( item,index) in 数据
◆item 和index可以结合其他指令一起使用
◆数组长度的更新会同步到页面上，是响应式的
【10】v-on补充
传递自定义参数，事件修饰符
<div id="app">
<input type="button" value="点一下" @click="doit(281672,9287346)">
<input type="text" @keyup.enter="down">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
methods:({
doit:function(it,is){
alert(it);
alert(is);
},
down:function(){
alert("吃了某")
}
})
})
</script>总结：
◆事件绑定的方法写成函数调用的形式，可以传入自定义参数.
◆ 定义方法时需要定义形参来接收传入的实参
◆事件的后面跟上.修饰符可以对事件进行限制
◆.enter可以限制触发的按键为回车
◆事件修饰符有多种
【11】v-model指令
获取和设置表单元素的值（双向数据绑定）
<body>
<div id="app">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"hello"
},
methods:{
getM:function(){
alert(this.message);
}
}
})
</script>
</body>总结：
◆v-model指令的作用是便捷的设置和获取表单元素的值
◆绑定的数据会和表单元素值相关联
◆绑定的数据←--→表单元素的值
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)