Vue示例教程
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript" src="static/js/vuejs-2.5.16.js"></script>-->
<script src="static/js/vuejs-2.5.16.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body> <!--
v-bind: 是vue中一个绑定属性的指令，可以简写为： v-bind:只能实现数据的单项绑定，只能从M绑定到V中，无法实现数据的双向绑定
v-on 可以简写为 @ 用于绑定事件 v-on : 事件 = “函数名” 简写 @事件=“函数名”
v-model:唯一一个实现双向数据绑定的命令 v-model只能运用在表单元素中，所谓表单元素是指：
select、input(text、email、adress、radio,checkbox）、textarea
-->
<!--mvvm中的v指的是这个html片段-->
<div id="app01">
<!-- v-text没有闪烁问题，但是v-text也会覆盖标签内部原本的内容。-->
<!-- 插值表达式只会替换自己的占位符，不会把整个标签内部的内容都清空-->
<h1>===={{msg}}=====</h1> <br> <!-- 差值表达式 ，把data中定义的数据显示到此处-->
<div v-text="msg">====</div><br>
<h3 v-html="result">==========</h3> <br> <!--可以解析html格式的内容。--> <input type="text" name="age" v-bind:value=" age+6"><br>
<!--v-bind: 是vue中一个绑定属性的指令，可以简写为：--> {{name}} <input type="text" name="name" v-model:value="name"> <br> <!--v-model:唯一一个实现双向数据绑定的命令-->
<button v-on:click="fun1">Vue的onClick事件</button> <br>
<button v-on:click="fun2('Vue 的参数 Vue')">Vue的onClick2事件</button> <br>
<button v-on:mouseover="fun3('皮卡丘')">点我啊</button> <br>
<button v-on:blur="fun4('皮卡丘失去焦点')">失去焦点</button> <br>
<button v-on:keydown="fun5('卡哇伊呀咿呀')">可爱</button> <br>
<!--=====================================================-->
<!--v-if和v-show是一样的，这是在隐藏的时候，v-show是通过给标签加display:none的样式完成的，而v-if是直接将元素去掉完成的-->
<p v-if="seen">当seen的属性为true 看见 ，false就看不见</p>
<p v-show="seen">v-show控制的语句</p>
<p v-for="key in list">{{key}}</p>
<p v-for="(key,index) in list">值为--->{{key}}---索引值为：--->{{index}}</p>
<p v-for="(key,index) in list1">值为--->{{key}}---索引值为：--->{{index}}</p>
<p v-for="(key,index) in lists">值为--->{{key}}---索引值为：--->{{index}}</p>
<p v-for="(val,key,index) in user">值为--->{{val}}---键为：--->{{key}}--->索引值为：--->{{index}}</p> <p v-for="count in 10"> this id the {{count}} times</p> <!--遍历数字的时候，默认从1开始--> </div> <script>
// mvvm中的vm： 就是指的这一部分
var vm =new Vue({
el:"#app01", //由Vue接管id为app的区域
// mvvm中的M：指的就是data对象
data:{
msg:"欢迎使用第一个vue!" , //注意：此处不要加分号
msg1:"",
result:"<h1 style='color: red'>这是个html标签的内容</h1>",
age:12 ,
name:"呆呆",
seen:false,
list:[1,2,3,4,5,6],
list1:[
{id:1,name:"呆呆",age:10},
{id:2,name:"敏敏",age:11},
{id:3,name:"小呆呆",age:12},
{id:4,name:"可爱敏",age:13},
{id:5,name:"机智呆",age:14}
],
lists:[],
user:{
id:1,
name:"呆呆",
age:18 }
},
mounted:function(){
var _this = this
axios.get('emp/list').then(
function (result) {
_this.lists=result.data;
}
).catch(
function (error) {
});
},
methods:{
fun1:function () {
alert("大家好，这是我的第一个vue方法！！")
},
fun2:function (msg1) {
alert("大家好，这是带参的vue");
this.msg=msg1;
alert(msg1);
alert(this.age); //在方法中可以直接引用data中的数据
// 在vm实例中，要想获取data中的数据或者methods中的方法，必须通过this.属性名或者this.方法名的方式调用，
// 这里的this就表示我们new 出来的VM实例对象
},
fun3:function (msg2) {
alert(msg2);
},
fun4:function (msg3) {
alert(msg3);
},
fun5:function (msg4) {
alert(msg4);
},
}
});
</script> </body>
</html>
vue 2.进阶
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript" src="static/js/vuejs-2.5.16.js"></script>-->
<script src="static/js/vuejs-2.5.16.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> </head>
<body> <div id="app01">
<!--添加-->
<el-dialog title="添加员工" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="员工id" :label-width="formLabelWidth">
<el-input v-model="form.eid" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="员工姓名" :label-width="formLabelWidth">
<el-input v-model="form.ename" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="员工年龄" :label-width="formLabelWidth">
<el-input v-model="form.eage" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</div>
</el-dialog>
<!-- <p v-for="key in list">id 为:{{key.eid}}–>值为：–>{{key.ename}}–></p>-->
<div style="margin-left: 400px;">
<el-button type="primary"style="margin: 10px 250px ;" @click="add">添加员工</el-button>
<el-table
v-bind:data="list"
style="width: 60%;"
:stripe="true"
:border="flag">
<el-table-column
prop="eid"
label="EID"
align="center">
</el-table-column>
<el-table-column
prop="ename"
label="姓名"
align="center">
</el-table-column>
<el-table-column
prop="eage"
align="center"
label="年龄">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
align="center"
width="100">
<template slot-scope="scope">
<el-button @click="deleteItem(scope.row.eid)" type="text" size="small">删除</el-button>
<el-button type="text" size="small" @click="editItem(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin-right: 400px;">
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
align="center"
:pageSize="pageSize"
:current-page="pageNum"
@current-change="changeNum"
:total="total">
</el-pagination>
</div>
</div> </div> <script>
// mvvm中的vm： 就是指的这一部分
var vm =new Vue({
el:"#app01", //由Vue接管id为app的区域
data:{
list:[],
total:5,
pageSize:3,
pageNum:1,
flag:true,
pageSize:2,
dialogFormVisible:false,
form:{
eid:'',
ename:'',
eage:''
},
formLabelWidth: '120px'
},
methods:{
editItem:function(item){
this.dialogFormVisible=true;
this.form.eid=item.eid;
this.form.ename=item.ename;
this.form.eage=item.eage; },
deleteItem:function(eid){
alert(eid);
var _this = this;
axios.delete("emp/del/"+eid).then(
function (result) {
if (result.data.map.statusCode==200){
_this.$message({
message: '删除成功',
type: 'success'
});
_this.fenye("emp/list",_this);
}
}).catch(function (reason) { })
},
confirm:function(){
var _this =this;
if (this.form.eid == ''){
axios.post("emp/saveInfo",this.form).then(
function (result) {
if(result.data.map.statusCode==200){
_this.dialogFormVisible=false;
_this.fenye("emp/list",_this);
}
}
).catch(function (reason) {
alert("失败")
});
} else {
alert("1111111111");
axios.put("emp/update",_this.form).then(
function (result) {
if(result.data.map.statusCode==200){
_this.dialogFormVisible=false;
_this.fenye("emp/list",_this);
}
}
).catch(function (reason) {
alert("失败")
});
} },
add:function(){
this.dialogFormVisible=true;
},
changeNum:function (num) {
var _this = this;
this.fenye('emp/list',_this);
},
fenye:function (url,_this) {
axios.get(url).then(
function (result) {
_this.list=result.data;
}
).catch(function (error) { });
}
},
mounted:function(){
var _this = this;
this.fenye('emp/list',_this);
}
});
</script> </body>
</html>
Vue示例教程的更多相关文章
- vue入门教程 (vueJS2.X)
vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- ASP.NET MVC 基于角色的权限控制系统的示例教程
上一次在 .NET MVC 用户权限管理示例教程中讲解了ASP.NET MVC 通过AuthorizeAttribute类的OnAuthorization方法讲解了粗粒度控制权限的方法,接下来讲解基于 ...
- [js高手之路] vue系列教程 - 事件专题(4)
本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型. 之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...
- webpack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- webpack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- webpack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- 后盾网lavarel视频项目---5、淘宝镜像cnpm的原理及如何使用
后盾网lavarel视频项目---5.淘宝镜像cnpm的原理及如何使用 一.总结 一句话总结: 原理:把npm上面的所有软件copy过来 使用:npm install -g cnpm --regist ...
- ubuntu下mysql数据库存储路径修改
一.安装mysql ubuntu系统安装配置APT源,apt install mysql-server mysql-client 二.查看安装端口情况 sudo netstat -tap | grep ...
- 如何保存 Activity 的状态？
Activity 的状态通常情况下系统会自动保存的,只有当我们需要保存额外的数据时才需要使用到这样的功能.一般来说, 调用 onPause()和 onStop()方法后的 activity 实例仍然存 ...
- Radio 单选框
Radio 单选框 在一组备选项中进行单选 ¶基础用法 由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着 ...
- 阶段3 2.Spring_04.Spring的常用注解_5 自动按照类型注入
运行出现了空指针异常 @Autowired 注解出现的位置 AutoWired的代码 常用的就是写类上和方法上. 运行测试,刚才运行是一个空指针异常 也就是通过Autowired 这个accountD ...
- linux查看内存使用情况top
top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器 可以直接使用top命令后,查看%MEM的内容.可以选择按进程查看或者按用户查看, ...
- 安装SQL Server 2008反复提示需要安装MICROSOFT NET FRAMEWORK 3 5 SP1的一个
在安装过.net framework 4的系统中,安装sql server 2008的安装前提之一MICROSOFT .NET FRAMEWORK 3.5 SP1时,可能已经安装并重启了,还是提示安 ...
- LeetCode.953-验证外语字典顺序(Verifying an Alien Dictionary)
这是悦乐书的第364次更新,第392篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第226题(顺位题号是953).在外语中,令人惊讶的是,他们也使用英文小写字母,但可能使 ...
- ef Migration 的一些基础命令
cmd ci 命令 dotnet ef migrations add NewColum --新增migrations dotnet ef database update--跟新数据库 dotnet e ...
- String StringBuffer StringBuilder区别与联系
java.lang.String.java.lang.StringBuffer.java.lang.StringBuilder都是字符串类型,是Java中用于处理字符串常用的三个类.它们主要有以下区别 ...