vue 框架，入门必看
2024-09-07 16:48:26
vue 的 入门
el 的挂载点：
el 是用来设置vue实例挂载，（管理）的元素
vue会管理el选项命中的元素以及内部的后代元素
可以使用其他的选择器，但是不建议使用ID选择器
可以使用其他的双标签，不能使用HTML和body
data： 数据对象
vue 中 用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂数据时，遵守js的语法即可
- code
<div id="app">
{{message}}
<h2>{{school.name}}{{school.age}}</h2>
<ul>
<li>{{ campus[] }}</li>
<li>{{ campus[] }}</li>
<li>{{ campus[] }}</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:"hello vue",
school:{
name:"柚子小哥哥",
age:""
},
campus:['苏州','上海','北京']
},
})
</script>
v-text
v-text 指令的作用就是：设置标签的内容（textContent）
默认写法会替换全部内容，使用差值表达是｛｛｝｝可以替换指定内容
- code
<div id="app">
<h2 v-text="message+'嘻嘻'"></h2>
<h2 v-text='info'></h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"柚子小哥哥!!!",
info:"Hello vue"
}
})
</script>
v-html
v-html 指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text 指令无论内容是什么，只会解析为文本
- code
<div id="app">
<p v-html='content'></p>
<p v-text='content'></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='https://www.cnblogs.com/yjzs/'>柚子小哥哥的博客园</a> "
}
})
</script>
v-on
v-on 指令的作用是：为元素绑定事件
事件名称不需要写on
指令可以简写为@
绑定的方法定义在 methods 属性中
方法的内部通过this关键子可以访问定义在data中数据
事件绑定的方法写成函数调用的形式，可以传递自定义参数
定义方法是需要形参来接受传入的实差参
事件的后面根上修饰符可以对事件进行限制
.enter 可以限制触发的按键的为回车
- code
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt" />
<input type="button" value="v-on简写" @click="doIt" />
<input type="button" value="双击事件" @dblclick="db" />
<input type="text" @keyup.enter="say" />
<p @click="changeFood">{{food}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
food: "柚子小哥哥！",
},
methods: {
doIt: function () {
alert("绑定点击事件");
},
db: function () {
alert("绑定双击事件！");
},
changeFood: function () {
// console.log(this.food);
this.food += "好帅啊。";
},
say: function () {
alert("绑定回车事件！");
},
},
});
</script>
v-show
v-show 指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display实现显示隐藏
指令后面的内容，最终都会解析会布尔值为true元素，值为false元素为隐藏
- code
<div id="app">
<input type="button" value="切换显示状态" @click="ChangeShow" />
<input type="button" value="累加" @click="add" />
<img v-show="isShow" src="./img//7735908_161703348144_2.jpg" alt="" />
<img v-show="age>=18" src="./img//7735908_161703348144_2.jpg" alt="" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false,
age: ,
},
methods: {
ChangeShow: function () {
this.isShow = !this.isShow;
},
add: function () {
this.age++;
},
},
});
</script>
v-if
v-if 指令的作用就是：根据表达式的真假切换元素的显示状态
本质是通过 DOM 元素老切换显示状态
表达式的值为true，元素存在与DOM树中，为false,从DOM中移除
- code
<div id="app">
<input type="button" @click="Show" value="切换显示" />
// v-if 操作的是DOM树
<p v-if="isShow">柚子小哥哥</p>
// v-show操作的是样式
<p v-show="isShow">v-show</p>
<p v-show="like>10">不喜欢</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false,
like:
},
methods: {
Show: function () {
this.isShow = !this.isShow;
},
},
});
</script>
v-bind
v-bind 指令的作用就是：为元素绑定属性
完整的写法是 v-bind 属性名
简写的话直接省掉v-bind ，只保留： 属性名
需要动态的增删class建议使用对象的方式
- code
<div id="app">
<img v-bind:src="imgSrc" alt="" />
<br />
<img
:src="imgSrc"
alt=""
:title="imgTitle"
:class="{Ac:Active}"
@click="Active"
/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "./img//7735908_161703348144_2.jpg",
imgTitle: "柚子小哥哥",
isActive: false,
},
methods: {
Active: function () {
this.isActive = !this.isActive;
},
},
});
</script>
v-for
v-for 指令的作用就是：根据数据生成的列表结构
数组经常v-for结合使用
语法是（item,index）in 数据
item 和 index 可以结合使用其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
- code
<div id="app">
<input type="button" value="增加数据" @click='add'>
<input type="button" value="移除数据" @click='rem'>
<ul>
<li v-for='(item,index) in arr'>
{{index+}} {{item}}
</li>
</ul>
<h1 v-for=' item in age' v-bind:title='item.p'>
{{item.p}}
</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:['广东','上海','苏州'],
age:[
{p:""},
{p:''},
{p:""}
]
},
methods:{
add:function(){
this.age.push({p:'岁'})
},
rem:function(){
this.age.shift()
}
}
})
</script>
v-model （双向绑定）
v-model 指令的作用是便捷和获取表单元素的值
绑定的数据和表单值相关联
绑定的数据《》 表单元素的值
- code
<div id="app">
<input type="button" value="修改mesage" @click='Modifies' >
<input type="text" v-model='message' >
<h3>{{message}} </h3> </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"柚子小哥哥"
},
methods:{
Modifies:function(){
this.message='修改内容！'
}
}
})
</script>
总结：
创建vue实例中，el(挂载点),data （数据），methods （方法）
v-on 指令的作用是绑定事件，简写为@
方法中通过this，关键字获取data中的数据
v-text 指令的作用是：设置元素的文本值，简写为｛｛｝｝
v-html指令的作用是：设置元素的innerHtml
数量增加的案例
<div id="app">
<button @click="sub">-</button>
<span> {{num}} </span>
<button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
num: ,
},
methods: {
add: function () {
// console.log('add')
if (this.num < ) {
this.num++;
} else {
alert("最多点5下");
}
},
sub: function () {
// console.log('sub')
if (this.num > ) {
this.num--;
} else {
alert("负数点不了");
}
},
},
});
</script>
最新文章
- 将asp.net webapi的运行时版本由4.0升级到4.5.1时遇到的问题及解决
- Windows下使用Git和GitHub.com
- 两个SVN仓库之间代码的转移
- 禅道---Bug管理模块
- 刚开始学python——数据结构——“自定义队列结构“
- CentOS修改系统时间
- HTTP入门
- Matlab：如何读取CSV文件以及如何读取带有字符串数据项的CSV文件
- Hashtable源码解析
- consistent.go 源码阅读
- jsp页面中include静态html出现乱码问题的解决方式
- firefox浏览器，主动出现hao123的解决办法
- C#-方法（八）
- Automatic Text Difficulty Classifier Assisting the Selection Of Adequate Reading Materials For European Portuguese Teaching --paper
- rsyn同步软链接保持不变
- 解决XCode7.1 上无法安装 Alcatraz PackageManager
- L233
- 知物由学 | 未来安全隐患：AI的软肋——故意欺骗神经网络
- tomcat安装以及常用配置
- c语言基本数据类型（short、int、long、char、float、double）