<body>
<div id="app">
<h2>{{name}}h2>
div>
body>
<script src="./js/vue.min.js">script>
<script>
//创建的vue实例,就是 VM ViewModel
var VM = new Vue({
el: "#app",
//data就是MVVM模式中的 model
data: {
name: "hello",
},
});
script>
首先,我们将上图中的DOM Listeners和Data Bindings看作两个工具,它们是实现双向绑定的关键。
MVVM的思想,主要是为了让我们的开发更加的方便,因为MVVM提供了数据的双向绑定
作用:获取和设置表单元素的值(实现双向数据绑定)
代码实例:
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>Documenttitle>
<script src="../js/vue.js" >script>
head>
<body>
<div id="app" >
<input type="button" value="修改model的数据" @click="change" /><br>
<input type="text" V-bind:value="msg" /> <br>
<label>单向绑定:label>{{msg}}<br>
<input type="text" v-model="msg" /><br>
<label>双向绑定:label>{{msg}}
div>
body>
<script>
//创建的vue实例,就是 VM ViewModel
var obj = new Vue({
el: "#app",
//data就是MVVM模式中的 model
data: {
msg: "天天好心情",
},
methods:{
change:function(){
this.msg = "我变了";
},
},
});
script>
html>
效果展示:
v-model指令总结
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>小黑记事本title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
head>
<body>
<section id="app">
<header class="header">
<h1>VUE记事本h1>
<input
autofocus="autofocus"
autocomplete="off"
placeholder="输入日程"
class="new-todo"
v-model:value="msg"
@keyup.enter="add"
/>
header>
<section class="main">
<ul class="listview">
<li class="todo" v-for="(item,index) in content">
<div class="view">
<span class="index">{{index + 1}}span> <label>{{item}}label>
<button class="destroy" @click="del(index)">button>
div>
li>
ul>
section>
<footer class="footer">
<span class="todo-count"> <strong>{{content.length}}strong> items left span>
<button class="clear-completed" @click="delAll">
Clear
button>
footer>
section>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var obj = new Vue({
el: "#app",
data:{
content:["西游记","水浒传","红楼梦"],
msg: "三体",
},
methods:{
add:function(){
//将用户输入的信息添加到列表里去
this.content.push(this.msg);
},
// 删除方法
del:function(index){
// 使用splice(元素索引,删除几个)根据索引删除
this.content.splice(index,1);
},
delAll:function(){
this.content = [];
}
},
});
script>
body>
html>
删除内容
点击删除指定内容(根据索引删除元素)
删除方法:
//删除方法
remove:function(index){
console.log(index);
//使用splice(元素索引,删除几个) 根据索引删除
this.list.splice(index,1);
}
清空数据
<button class="clear-completed" @click="clear()">Clearbutton>
//清空数组元素
clear:function(){
this.list=[];
}
Ajax 是指一种创建交互式网页应用的开发技术。Ajax = 异步 JavaScript 和 XML。
Ajax 是指一种创建交互式网页应用的开发技术。Ajax = 异步 JavaScript 和 XML。
案例演示
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<input type="text" />
<input type="button" value="Jquery发送异步请求" onclick="run1()" />
body>
<script src="./jquery-1.8.3.min.js">script>
<script>
function run1() {
//JQuery Ajax方式 发送异步请求
$.ajax({
url: "/ajax",
async:true,
data: { name: "天青" },
type: "post",
dataType:"text",
success: function (res) {
console.log(res)
alert("响应成功" + res);
},
error: function () {
alert("响应失败!");
}
});
}
script>
html>
servlet
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//1.获取请求数据
String username = req.getParameter("name");
//模拟业务操作,造成的延时效果
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//2.打印username
System.out.println(username);
resp.getWriter().write("hello hello");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
VUE中结合网络数据进行应用的开发
[^]: Vue2.0之后,尤雨溪推荐大家用axios替换JQuery ajax
使用步骤:
导包
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
请求方式
get
POST
axios.post(地址,{key:value,key2:value2}).then(function(response)
{},function(error){})
<body>
<input type="button" value="get请求" id="get">
<input type="button" value="post请求" id="post">
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.getElementById("get").onclick=function(){
axios.get("https://autumnfish.cn/api/joke/list?num=1")
.then(function(response){
//请求成功,调用
console.log(response);
},function(error){
//请求失败,调用
console.log(error)
});
}
/*
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.getElementById("post").onclick=function(){
axios.post("https://autumnfish.cn/api/user/reg",{username:"张百万"})
.then(function(response){
console.log(response);
},function(error){
console.log(error);
});
}
</script>
axios 必须导包才能使用
使用get或者post方法,就可以发送请求
then方法中的回调函数,会在请求成功或者请求失败的时候触发
通过回调函数的形参可以获取响应的内容,或者错误信息
vue+axios
<body>
<div id="app">
<input type="button" value="点击获取一个笑话" @click="getJoke">
<p>{{joke}}p>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
/*
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var VM = new Vue({
el:"#app",
data:{
joke:"笑笑更健康"
},
methods: {
getJoke:function(){
console.log(this.joke);//笑笑更健康
var that = this; //把this保存起来
//异步访问
axios.get("https://autumnfish.cn/api/joke").then(
function(response){
//获取data中的笑话
console.log(response.data);
//console.log(this.joke); //undefined 没有获取到this
that.joke=response.data;
},
function(error){}
)
}
}
})
script>
案例总结
axios回调函数中this指向已经改变,无法访问data中的数据
解决方案: 将this进行保存,回调函数中直接使用保存的this即可
在Vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长忙活着逻辑更为复杂时,就会变得臃肿甚至难以维护和阅读,比如下面的代码:
<div>
写在双括号中的表达式太长了,不利于阅读
{{text.split(',').reverse().join(',')}}
div>.
将这段操作text.split(',').reverse().join(',') 放到计算属性中,最终返回一个结果值就可以
<body>
<div id="app">
<h2>{{res()}}h2>
<h2>{{res()}}h2>
<h1>{{res2}}h1>
<h1>{{res2}}h1>
<h1>{{res2}}h1>
div>
body>
<script>
var obj = new Vue({
el:"#app",
data:{
a:10,
b:20,
},
methods:{
res:function(){
console.log("methods执行了:");
return this.a * this.b;
},
},
computed:{
res2:function(){
console.log("computed执行了!");
return this.a * this.b;
},
},
});
script>
效果展示:
过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。
数据加工车间,对值进行筛选加工.
{{ msg | filterA }} msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道将数据传输给过滤器进行过滤 加工操作
<h1 v-bind:id=" msg | filterA"> {{ msg }} h1>
实现代码:
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>Documenttitle>
<script src="../js/vue.js">script>
head>
<body>
<div id="app">
<P>电脑价格:{{price | addIcon}}P>
div>
body>
<script>
var obj = new Vue({
el: "#app",
data:{
price:200,
},
methods:{
},
computed:{
},
// 局部过滤器
filters:{
// 处理函数,value = price,是固定参数
addIcon(value){
return "$" + value;
},
}
});
script>
html>
全局过滤器
需求: 将用户名开头字母大写
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>Documenttitle>
<script src="../js/vue.js">script>
head>
<body>
<div id="app">
<p>姓名:{{user.name | changeName}}p>
div>
body>
<script>
// 在创建Vue实例之前,创建全局过滤器
Vue.filter("changeName",function(value){
// 将姓名开头字母大写,然后在重新拼接
return value.charAt(0).toUpperCase() + value.slice(1);
});
var obj = new Vue({
el: "#app",
data: {
user:{name:"jack"},
},
});
script>
html>
总结:
需求: 监听姓名变化,实时显示
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>Documenttitle>
<script src="../js/vue.js">script>
head>
<body>
<div id="app">
<label>姓:label> <input typoe="text" v-model="lastName" /><br>
<label>名:label><input type="text" v-model="firstName" /><br>
<label>全名:{{getfullName}}label>
div>
body>
<script>
var obj = new Vue({
el: "#app",
data: {
firstName: "",
lastName: "",
fullName: "",
},
watch:{
firstName(newValue, oldValue){
console.log("newValue:"+newValue);
console.log("oldValue:"+oldValue);
this.fullName = this.lastName +" "+newValue;
},
lastName(newValue,oldValue){
console.log("newValue:"+newValue);
console.log("oldValue:"+oldValue);
this.fullName = newValue +""+ this.firstName;
},
},
computed:{
getfullName:function(){
return this.fullName = this.lastName+this.firstName
}
}
});
script>
html>
语法格式:
Vue.component("组件名称", {
template: "html代码", // 组件的HTML结构代码
data(){ //组件数据
return {}
},
methods: { // 组件的相关的js方法
方法名(){
// 逻辑代码
}
}
})
注意:
代码实现:
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>Documenttitle>
<script src="../js/vue.js">script>
head>
<body>
<div id="app">
<page-head>page-head>
div>
body>
<script>
// 定义全局组件
Vue.component("page-head",{
// 组件的命名一般使用短横线方式,组件中的模板只能有一个根元素
template: "{{msg}}
",
data(){
// 组价中的data是一个函数
return {
msg:"hello这里是组件中的data数据",
};
},
methods: {
hello() {
alert("天天好心情");
}
},
});
var obj = new Vue({
el: "#app",
data:{
},
});
script>
html>
比起全局组件,局部组件只能在同一个实例内才能被调用。局部组件的写法和全局组件差不多。 唯一不同就是:局部组件要写在Vue实例里面。
new Vue({
el: "#app",
components: {
组件名: {
// 组件结构
template: "HTML代码",
// data数据
data() { return { msg:"xxxx" };},
},
},
});
注意:
创建局部组件,注意components,注意末尾有’‘s’’,而全局组件是不用+“s”的,这意味着,component里可以创建多个组件。
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>Documenttitle>
<script src="../js/vue.js">script>
head>
<body>
<div id="app">
<pagecontent>pagecontent>
div>
body>
<script>
var obj = new Vue({
el: "#app",
components:{
// 组件名称
"pagecontent":{
// 组件内容
template: "{{msg}}
",
data(){
return{
msg:"今天不学习,明天变垃圾!",
};
},
},
},
});
script>
html>
效果展示:
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>Documenttitle>
<script src="../js/vue.js">script>
head>
<body>
<div id="app">
<page-content>page-content>
div>
<template id="content">
<div>
<button @click="show">{{msg}}button>
div>
template>
body>
<script>
var obj = new Vue({
el: "#app",
components:{
"page-content":{
template: "#content",
data(){
return{
msg:"点击查询",
};
},
methods:{
show(){
alert("正在查询,请稍等···");
}
}
},
},
});
script>
html>
总结:
每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期
了解生命周期的好处:
下图展示了实例的生命周期:
<body>
<div id="app">
<button @click="next">获取下一句button>
<h2 id="msg">{{message}}h2>
div>
body>
<script src="./vue.min.js">script>
<script>
var VM = new Vue({
el: "#app",
data: {
message: "想当年,金戈铁马",
},
methods: {
next() {
this.message = "气吞万里如虎!";
},
show() {
alert("show方法执行!");
},
},
beforeCreate() {
alert("1.beforeCreate函数在组件实例化之前执行");
alert(this.message); //undefined
this.show(); // this.show is not a function
},
created() {
alert("2.created函数执行时,组件实例化完成,但是DOM(页面)还未生成");
alert(this.message);
this.show();
},
beforeMount() {
alert(
"3.beforeMount函数执行时,模板已经在内存中编辑完成了,尚未被渲染到页面中"
);
alert(document.getElementById("msg").innerText); //Cannot read property'innerText' of null
},
mounted() {
alert("4.mounted函数执行时,模板已经渲染到页面,执行完页面显示");
alert(document.getElementById("msg").innerText);
},
beforeUpdate() {
alert("5.beforeUpdate执行时,内存中的数据已更新,但是页面尚未被渲染");
alert("页面显示的内容:" + document.getElementById("msg").innerText);
alert("data中的message数据是: " + this.message);
},
updated() {
alert("6.updated执行时,内存中的数据已更新,此方法执行完显示页面!");
},
});
script>
在Web开发中,路由是指根据URL分配到对应的处理程序。 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图单页面web应用(single page web application,SPA)
百度百科
单页应用不存在页面跳转,它本身只有一个HTML页面。我们传统意义上的页面跳转在单页应用的概念下转变为了 body 内某些元素的替换和更新,举个例子:
整个body的内容从登录组件变成了欢迎页组件, 从视觉上感受页面已经进行了跳转。但实际上,页面只是随着用户操作,实现了局部内容更新,依然还是在index.html 页面中。
单页面应用的好处:
router :
是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌 ,router 就相当于一个管理者,它来管理路由。
route:
ruter相当于路由器, route就相当于一条路由.比如: Home按钮 => home内容, 这是一条route, news按钮 => news内容, 这是另一条路由。
routes :
是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, {about按钮 => about 内容}]
router-link组件:
router-link 是一个组件,是对标签的一个封装. 该组件用于设置一个导航链接,切换不同 HTML内容。 to 属性为目标地址, 即要显示的内容。
router-view 组件:
路由导航到指定组件后,进行渲染显示页面.
(1)Vue.js路由需要载入vue-router库
//方式1: 本地导入
<script src="vue-router.min.js"></script>
//方式2: CDN
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
(2)使用步骤
Vue 的$mount()为手动挂载,在项目中可用于延时挂载(例如在挂载之前要进行一些其他操作、判断等),之后要手动挂载上。new Vue时,el和$mount并没有本质上的不同。
(3)Html代码
<body>
<div id="app">
<h1>渣浪.comh1>
<p>
<router-link to="/home">go to homerouter-link>
<router-link to="/news">go to newsrouter-link>
p>
<router-view>router-view>
div>
(4)JS代码
<script src="./vue.min.js"></script>
<script src="./vue-router.min.js"></script>
<script>
//1.定义路由所需的组件
const home = { template: "首页" };
const news = { template: "新闻" };
//2.定义路由 每个路由都有两部分 path和component
const routes = [
{ path: "/home", component: home },
{ path: "/news", component: news },
];
//3.创建router路由器实例,对路由对象routes进行管理.
const router = new VueRouter({
routes: routes,
});
//4.创建Vue实例, 调用挂载mount函数,让整个应用都有路由功能
const VM = new Vue({
router,
}).$mount("#app"); //$mount是手动挂载代替el
</script>
完结撒花
写作不易,如果您觉得写的不错,欢迎给博主点赞、收藏、评论、收藏来一波~让博主更有动力吧!
路漫漫其修远兮,吾将上下而求索