编程语言
发布时间：2022-06-27 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了vue入门 一些的一些简单使用:，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。
使用vue.min.js 里的 vue 做的一个简单模板<body>
@H_
489_30@
<!-- vue 主要关注的核心式MVC模式终端 视图层 定义一层数据 再将数据显示再页面上 -->
<div id="app">
{{messagE}}
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
//
//el 针对哪些元素进行 vue的渲染
el: '#app',
data:{
message : 100
}
})
</script>
</body>
vue 基本的格式如上图 el 绑定 id 为 app 的 对象 data里面放入数据 。
一些指令如下:
1.绑定: v-bind 也可以简写为 冒号:
@H_
489_30@
<div id="app">
<!-- 数据绑定在html属性中，使用 v-bind 指令 -->
<h1 v-bind@R_394_6964@="name">{{name}}
</h1>
<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 @R_394_6964@="name">{{name}}
</h1>
</div>
2. 双向数据绑定 v-model： 在修改数值时 data里面的数据也会被修改
@H_
489_30@
<body>
<!-- vue 主要关注的核心式MVC模式终端 视图层 定义一层数据 再将数据显示再页面上 -->
<div id="app">
<input type="text" v-bind:value="keyword">
<!-- vmodel 双向绑定 -->
<input type="text" v-model:value="keyword">
<p>您要查询的是：
{{keywor
D}}
</p>
</div>
<script src="vue.min.js"></script>
<script>
// 双向 数据绑定 html
new Vue({
//
//el 针对哪些元素进行 vue的渲染
el: '#app',
data:{
// 数据模型的定义
keyword: '比翼双飞'
}
})
// 双向 数据绑定： 当视图发生变化的时候 数据也会同步发生变化
// 用户再页面上的修改,会自动同步到 数据模型中去
</script>
</body>
- 当数据发生变化的时候，视图也会跟着发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
3.事件 v-on 用来做事件处理 也可以简写为 @
@H_
489_30@
<body>
<!-- vue 主要关注的核心式MVC模式终端 视图层 定义一层数据 再将数据显示再页面上 -->
<div id="app">
<!-- 事件指令 -->
<button v-on:click="show()">查询
</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
//
//el 针对哪些元素进行 vue的渲染
el: '#app',
data:{
message : 100
},
methods:{
//
show(){
console.log(new Date());
}
}
})
</script>
</body>
4 修饰符 以半角句号（.） 指明的特殊后缀，用于指出一个指令的特殊处理方式
@H_
489_30@
<body>
<!-- vue 主要关注的核心式MVC模式终端 视图层 定义一层数据 再将数据显示再页面上 -->
<div id="app">
<!-- 修饰符 prevent 阻止修饰行为 -->
<form action="save" v-on:submit.prevent="check()">
姓名：<input type="text" v-model="user.name" >
<button type="submit">保存
</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
//
//el 针对哪些元素进行 vue的渲染
el: '#app',
data:{
user: {}
},
methods: {
check(){
console.log("校验用户名 是否输入完好")
console.log(this.user)
if(!this.user.Name){
alert("请输入用户名")
return;
}
}
}
})
</script>
5 条件渲染 使用 v-if 或者 v-show（需要频繁切换）
@H_
489_30@
<body>
<!-- vue 主要关注的核心式MVC模式终端 视图层 定义一层数据 再将数据显示再页面上 -->
<div id="app">
<input type="checkbox" v-model = "ok">同意许可协议
<!-- 绑定 ok 条件渲染 -->
<!-- v-if 在条件渲染的时候基本上是对dom 文件做修改 -->
<h1 v-if="ok">协议内容
</h1>
<h2 v-else="ok">不显示内容
</h2>
<!-- 频繁做切换的时候 使用v-show 初始化开销大 渲染所有节点 切换时需要不断的创建和删除节点
切换时 只需要修改节点的属性即可
-->
<h3 v-show="ok">show: 协议内容
</h3>
<h3 v-show="!ok">no
</h3>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
//
//el 针对哪些元素进行 vue的渲染
el: '#app',
data:{
ok:false
}
})
</script>
</body>
6.列表渲染 v-for 循环指令
@H_
489_30@
<body>
<!-- vue 主要关注的核心式MVC模式终端 视图层 定义一层数据 再将数据显示再页面上 -->
<div id="app">
<table>
<tr v-for="item in userList">
<td>{{ite
m.usernam
E}}
</td>
<td>{{ite
m.ag
E}}
</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
//
//el 针对哪些元素进行 vue的渲染
el: '#app',
data:{
//用户数组 用列表的形式
userList: [
{username : 'Helen',age: 18},
{username : 'Peter',age: 10},
]
}
})
</script>
</body>
7.vue的生命周期: 注意两个函数 created() 和 mounted()
//created() 终端方法在内存中已经取得，但是未渲染到页面中
//mounted90 的方法 数据已经被渲染到页面中
@H_
489_30@
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '床前明月光'
},
// 页面在内存中已经初始化完毕：
// 可以操作 data 中的数据、调用methods中的方法
// 但是数据尚未被渲染到页面中：用户看不见
created() {
console.log('created')
//可以操作 data 中的数据
console.log(this.messagE)
//可以调用methods中的方法
this.show()
//无法取出dom节点取数据，说明用户无法在浏览器中看见这个内容
console.log(document.getElementById('h3').innerText)
},
// 数据已经被渲染到页面中
mounted() { // 第四个被执行的钩子方法
console.log('@H_353_78
@mounted
')
//可以取出dom节点取数据，说明用户已经在浏览器中看见内容
console.log(document.getElementById('h3').innerText)
},
methods: {
show() {
console.log('show方法被调用')
}
},
})
</script>
二、axios 和element-ui
axios 是独立与vue的项目,可以用于发送ajax 请求
element-ui 是 vue的组件库
在同一个终端中 会有同源策略导致跨域问题的出现 ，
（同源策略:
- 就是两个地址具有相同的协议（protocol），主机（host）和端口号（port）
- 同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
- 同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能。
）
在相关java方法的controller层上添加 注解 @CrossOrgin 来解决跨域的问题
业务分层 和不分层的 简单实现:
@H_
489_30@
<body>
<!-- vue 主要关注的核心式MVC模式终端 视图层 定义一层数据 再将数据显示再页面上 -->
<div id="app">
<!-- 显示讲师列表 -->
<el-button type="success" @click="getTeacherList">获取列表
</el-button>
<!-- //对列表进行渲染 -->
<table>
<tr v-for="item in teacherList">
<td>{{ite
m.nam
E}}
</td>
<td>{{ite
m.level}}
</td>
</tr>
</table>
<el-table :data="teacherList" style="width: 100%">
<el-table-column prop="date" label="编号" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="level" label="级别">
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<!-- 这里的scope 指的是当前这一行的意思 -->
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看
</el-button>
<el-button type="text" size="small">编辑
</el-button>
</template>
</el-table-column>
</el-table>
<!-- -->
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<!-- 注意 这个ui必须放到vue后面 -->
<script src="element-ui/lib/index.js"></script>
<script>
new Vue({
//
//el 针对哪些元素进行 vue的渲染
el: '#app',
data: {
//显示讲师列表
teacherList: [],
},
created() {
this.getTeacherList();
},
methods: {
//基础配置类： 返回值 是一个函数
initrequest() {
return axios.create({
baseURL: 'http://localhost:8010',
//五秒
timeout: 5000
})
},
// api 调用
teacherListApi() {
//request 函数
let request = this.initrequest()
return request({
url: '/admin/edu/teacher/list',
method: 'get'
})
},
//数据渲染 获取teacherList 的方法
getTeacherList() {
this.teacherListApi().then(response => {
this.teacherList = response.data.data.item;
}).catch(error => {
console.log(error)
})
},
//业务不分层
getTeacherList2() {
console.log('获取 讲师 列表');
//目标服务器 访问端口 被阻拦： 同源策略 具有相同的地址 相同的协议 相同的端口号的时候 会出现同源策略的问题
// 广域网 访问前端程序 开放端口
//非同源的话 会有一些安全性的问题 和安全性的 策略 接下来是回调:
axios.get("http://localhost:8010/admin/edu/teacher/list").then(response => {
console.log(responsE);
this.teacherList = response.data.data.item;
});
}
}
})
</script>
</body>
大佬总结
以上是大佬教程为你收集整理的vue入门 一些的一些简单使用:全部内容，希望文章能够帮你解决vue入门 一些的一些简单使用:所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
