Vue3.0框架-基础
第二种是class=[a,b]绑定的,a与b又在data()中与实际的class绑定，优点是可以快速绑定多个类对象。3.通过vue.createApp(kk).mount('#ha')进行类与属性方法的连接-->不需要分号结尾。3.优点在于可以快速绑定事件，直接事件--方法，并且有独立内容区，方便后续查找。1.使用v-on:click="函数名"-->直接写这个事件需要使用什么方法。-->chan
·
Vue的安装
官网：https://vue3js.cn/
代码地址：https://unpkg.com/vue@next
进入代码地址复制所有代码创建lib-->vue.js文件
创建第一个Vue文件
注意点：
1.记得导入vue.js文件
2.创建const=kk={}在其内部放置属性和方法，这两种都需要return回去
3.通过vue.createApp(kk).mount('#ha')进行类与属性方法的连接-->不需要分号结尾
4.每次创建一个属性之后都用逗号隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="ha">
{{name}}--{{mobile}}--{{number*2}}
</div>
<script>
const kk={//用来定义变量和方法
data(){//这个是定义变量的
return{
name:'li',
mobile:'123456789',
number:'100'
}
}
}
Vue.createApp(kk).mount('#ha')//通过Vue框架连接，使挂载的id或者类可以使用kk内定义的变量和方法
</script>
</body>
</html>Vue的细节问题
1.methods的书写格式
-->注意后面有s
-->每写一个方法都标记逗号
2.data及数组，变量的书写书写格式
3.vue的格式绑定
-->#对应id绑定
-->圆点.对应class绑定
-->change对应绑定设置的vue常量，期内放置了变量,数组和方法
4.数据填充，CSS绑定，JS方法绑定
-->参考下文
数据填充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="ha">
<p>{{t}} ---我是原有内容</p>
<p v-html="t">---我是原有内容</p>
<p v-text="t">---我是原有内容</p>
</div>
<script>
Vue.createApp({
data(){
return{
t:'<h1>12345</h1>'
}
}
}).mount('#ha');
</script>
</body>
</html>
v-bind指令 (链接替代)
作用是替换a标签或者img标签中的一些属性链接,有两种书写方法,
一种是v-bind:href:"url"
还有一种是快捷:href:"url"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url" :title="title" >{{website}}</a>
<img :src="src" alt="">
</div>
<script>
const kk={
data(){
return{
url:'https://yhssglxt.miit.gov.cn/web/appealInformation',
title:'投诉一下，态度变好',
website:'工信部',
src:'04-fj.jpg'
}
}
}
Vue.createApp(kk).mount('#app')
</script>
</body>
</html>通过Vue绑定style中的类(CSS)
第一种是class={active:isActive}绑定的,优点在于可以控制类是否使用
第二种是class=[a,b]绑定的,a与b又在data()中与实际的class绑定，优点是可以快速绑定多个类对象
<!DOCTYPE html>
<html lang="en">
<script src="../lib/vue.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
.bg{
background-color: orange;
}
</style>
</head>
<body>
<div id="kk">
<p :class="{active:isActive}">我喜欢你</p>
<p :class=[t,a]>hellow</p>
</div>
<script>
Vue.createApp({
data(){
return{
isActive:true,
t:'active',
a:'bg',
}
}
}).mount('#kk')
</script>
</body>
</html>v-on指令(绑定事件)
1.使用v-on:click="函数名"-->直接写这个事件需要使用什么方法
2.然后在script的methods中书写方法的具体内容
3.优点在于可以快速绑定事件，直接事件--方法，并且有独立内容区，方便后续查找
4.如果方法内需要使用data区定义的数据，那就得加上this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.status {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: orange;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div
:class="{status:isStatus}"
v-on:click="handle"
@mouseenter="enter('哈哈哈，我来了')"
>点我</div> <!--这里设置一个函数，触发事件为鼠标进入，函数名字是enter，输入参数为一个str-->
</div>
<script src="../lib/vue.js"></script>
<script>
const kk = {
//data定义数据，methods定义对象或者说是方法
data(){
return{
isStatus:true
}
},
methods:{
// handle(){
// console.log('我被点了一下');
// },
enter (str) {
console.log(str);
},
handle(){
this.isStatus=!this.isStatus
}
}
}
Vue.createApp(kk).mount('#app');
</script>
</body>
</html>v-if指令(条件控制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="age>18">已成年</p>
<p v-else>未成年</p>
</div>
<script>
Vue.createApp({
data(){
return{
age:10,
}
}
}).mount('#app')
</script>
</body>
</html>v-for指令(数组遍历)-->常用于填充表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<ul id="app">
<li v-for="(item,index) in ary" :key="index">
{{item.name}}--{{item.age}}
</li>
</ul>
<script>
Vue.createApp({
data(){
return{
ary:[
{name: "li", age: 18},
{name:"xu",age:20},
{name:"qo",age:23},
{name:"ooo",age:25}
]
}
}
}).mount('#app')
</script>
</body>
</html>补充：数组添加-->通过设计一个对象属性，并且用push方法
v-model指令(变量的双向绑定)
每次更改框内的内容，同时会输出这个改变的属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="temp" @keyup="change()">
</div>
<script>
const kk={
data(){
return{
temp:'到公司了没?'
}
},
methods:{
change(){
alert(this.temp)
}
}
}
Vue.createApp(kk).mount('#app');
</script>
</body>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)