Vue基本使用
Vue快速使用第一步引入vue.js[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BdShsdmF-1611054368487)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20210119154633394.png)]第二步<div id="app"><!-- {{}}
Vue
快速使用
第一步
引入vue.js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BdShsdmF-1611054368487)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20210119154633394.png)]
第二步
<div id="app">
<!-- {{}} 插值表达式，绑定vue中的data数据 -->
{{message}}
</div>
第三步
<script>
// 创建一个vue对象
new Vue({
el: '#app',//绑定vue作用的范围
data: {//定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- {{}} 插值表达式，绑定vue中的data数据 -->
{{message}}
</div>
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
new Vue({
el: '#app',//绑定vue作用的范围
data: {//定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
v-bind单向绑定
<div id="app">
<!-- v-bind指令
单向数据绑定
这个指令一般用在标签属性里面，获取值
-->
<h1 v-bind:title="message">
{{content}}
</h1>
<!--简写方式,title属性鼠标长期放在上面会有标题出现-->
<h2 :title="message">
{{content}}
</h2>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: '我是标题',
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
v-model双向绑定
<input type="text" v-bind:value="searchMap.keyWord"/>
<!--双向绑定-->
<input type="text" v-model="searchMap.keyWord"/>
v-on事件操作
<div id="app">
<!--vue绑定事件-->
<button v-on:click="search()">查询</button>
<!--vue绑定事件简写,后面的方法加不加括号都一样-->
<button @click="search()">查询1</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: '尚硅谷'
},
//查询结果
result: {}
},
methods:{//定义多个方法
search() {
console.log('search....')
},
f1() {
console.log('f1...')
}
}
})
</script>
.prevent修饰符阻止默认行为
<div id="app">
<form action="save" v-on:submit.prevent="onSubmit">
<input type="text" id="name" v-model="user.username"/>
<button type="submit">保存</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
user:{}
},
methods:{
onSubmit() {
if (this.user.username) {
console.log('提交表单')
} else {
alert('请输入用户名')
}
}
}
})
</script>
v-if条件判断(执行的时候才加载)
v-show条件判断(一开始就加载)
<div id="app">
<input type="checkbox" v-model="ok"/>是否同意
<!--条件指令 v-if v-else -->
<h1 v-if="ok">尚硅谷</h1>
<h1 v-else>谷粒学院</h1>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok:false
}
})
</script>
v-for列表循环指令
<div id="app">
<ul>
<li v-for="n in 10"> {{n}} </li>
</ul>
<ol>
<li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
</ol>
<hr/>
<table border="1">
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
}
})
</script>
全局组件
第一步
组件进行定义
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PfIRv5Zw-1611054368490)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20210119181350536.png)]
第二步
组件进行引入使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-paoX3OLi-1611054368491)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20210119181412018.png)]
vue的生命周期
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YI532XyW-1611054368494)(file:///D:/JAVA—SpringBoot%E5%88%86%E5%B8%83%E5%BC%8F%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/up%E7%AC%94%E8%AE%B0/day03/day03%E7%AC%94%E8%AE%B0/day03%E9%A1%B9%E7%9B%AE%E3%80%90%E9%A1%B9%E7%9B%AE%E5%89%8D%E7%AB%AF%E7%9B%B8%E5%85%B3%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%B8%80%E3%80%91/index_files/0.9177152660737906.png)]
<div id="app">
hello
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
created() {
debugger
//在页面渲染之前执行
console.log('created....')
},
mounted() {
debugger
//在页面渲染之后执行
console.log('mounted....')
}
})
</script>
vue路由（必须要先引入vue再引入router）
第一步
引入，和引入vue一样（必须要先引入vue再引入router）
第二步
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
</script>
axios
结构固定
箭头函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VhMg0XyJ-1611054368498)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20210119185928501.png)]
<div id="app">
<!--把userList数组里面数据显示 使用v-for指令 -->
<div v-for="user in userList">
{{user.name}} -- {{user.age}}
</div>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
//固定的结构
data: { //在data定义变量和初始值
//定义变量，值空数组
userList:[]
},
created() { //页面渲染之前执行
//调用定义的方法
this.getUserList()
},
methods:{//编写具体的方法
//创建方法 查询所有用户数据
getUserList() {
//使用axios发送ajax请求
//axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
axios.get("data.json")
.then(response =>{//请求成功执行then方法
//response就是请求之后返回数据
//console.log(response)
//通过response获取具体数据，赋值给定义空数组
this.userList = response.data.data.items
console.log(this.userList)
})
.catch(error =>{
}) //请求失败执行catch方法
}
}
})
</script>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献7条内容
所有评论(0)