<!-- 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 也可以简写为 冒号:
<div id="app">
<!-- 数据绑定在html属性中，使用 v-bind 指令 -->
<h1 v-bind:title="name">{{name}}</h1>
<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="name">{{name}}</h1>
</div>
2. 双向数据绑定 v-model： 在修改数值时 data里面的数据也会被修改
<body>
<!-- vue 主要关注的核心式MVC模式终端 视图层 定义一层数据 再将数据显示再页面上 -->
<div id="app">
<input type="text" v-bind:value="keyword">
<!-- vmodel 双向绑定 -->
<input type="text" v-model:value="keyword">
<p>您要查询的是：{{keyword}}</p>
</div>
<script src="vue.min.js"></script>
<script>
// 双向 数据绑定 html
new Vue({
//
//el 针对哪些元素进行 vue的渲染
el: '#app',
data:{
// 数据模型的定义
keyword: '比翼双飞'
}
})
// 双向 数据绑定： 当视图发生变化的时候 数据也会同步发生变化
// 用户再页面上的修改,会自动同步到 数据模型中去
</script>
</body>
- 当数据发生变化的时候，视图也会跟着发生变化
- 数据模型发生了改变，会直接显示在页面上
- 当视图发生变化的时候，数据也会跟着同步变化
- 用户在页面上的修改，会自动同步到数据模型中去
3.事件 v-on 用来做事件处理 也可以简写为 @
<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 修饰符 以半角句号（.） 指明的特殊后缀，用于指出一个指令的特殊处理方式
<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（需要频繁切换）
<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 循环指令
<body>
<!-- vue 主要关注的核心式MVC模式终端 视图层 定义一层数据 再将数据显示再页面上 -->
<div id="app">
<table>
<tr v-for="item in userList">
<td>{{item.username}}</td>
<td>{{item.age}}</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 的方法 数据已经被渲染到页面中
<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('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）是一种约定，它是浏览器最核心也最基本的安全功能。
<body>
<!-- vue 主要关注的核心式MVC模式终端 视图层 定义一层数据 再将数据显示再页面上 -->
<div id="app">
<!-- 显示讲师列表 -->
<el-button type="success" @click="getTeacherList">获取列表</el-button>
<!-- //对列表进行渲染 -->
<table>
<tr v-for="item in teacherList">
<td>{{item.name}}</td>
<td>{{item.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>