一、如何创建一个Vue实例*******************************************************
{{}} 在vue中是一个展示数据的方式
一个页面中可以有多个vue实例，他们之间互不影响
el 表示当前vue实例的作用范围
data 表示当前vue实例中使用到的数据
当vue声明变量时 vue内的内容可修改,
<script>
/*说到这里是没有讲明白什么是挂载，
Vue实例
通过Vue开发单页面项目，一个项目就是一个Vue实例（暂且这么理解吧），也就是通过new Vue()语句创建的对象。
那么既然有了一个实例，那么要显示出来，就得放入HTML文档中，这就是挂载*/
new Vue({
// el是实例挂载点，会将根组件替换掉原文档中id为 app 标签
el: '#app',
// 通过render函数渲染
render: h => {
// 这里App是根组件
h(App)
}
})
</script>
二：v-bind数据绑定*******************************************************
v-bind 是vue中的一个指令(命令，标签属性)，动态的绑定一个数据,可以简写为:,后面""中的内容是一个js表达式，
v-bind:或者:
三：v-on:事件绑定*******************************************************
v-on表示绑定一个事件,可以简写为@
值是一个js表达式或者一个methods方法内容,
methods表示方法，当前vue实例中可以使用到的自定义方法
四：数据绑定和事件绑定练习---切换小球的颜色-demo*******************************************************
五：v-for循环绑定数据*******************************************************
v-for循环的时候需要为每一项添加一个key,key的作用是优化标签查找性能
数组，对象，数字，字符串 都可以用 v-for
其中特殊的是 如果是数字5，则循环为 1 2 3 4 5
六：练习的内容---获取数据进行展示*******************************************************
原生js的内置方法，用于发起一个网络请求获取数据
是以promise对象的形式进行数据返回
网址为一个接口
七：v-model数据绑定*******************************************************
v-model指令可以实现表单元素和data的绑定
v-model指令及其修饰符说明与用法的链接（输入表单，单选多选，文本框，下拉列表）：
https://www.jianshu.com/p/cadf8890abc4
八：过滤器*******************************************************
| 表示使用一个过滤器,|后面跟过滤器的名字。 可以多个过滤器进行连写
filters把要显示的内容在页面中进行格式化处理
九：显示和隐藏
v-show 指令用来控制标签的显示和隐藏，通过设置display属性实现
v-if 指定通过删除或者添加标签的形式控制标签显示和隐藏，建议使用v-show
一：如何创建一个Vue实例{{}}
<body>
<!-- {{}} 在vue中是一个展示数据的方式 -->
<div id="app">
<h1>{{msg}}</h1>
<p>{{title}}</p>
</div>
<hr />
<h5>{{msg}}</h5>
<hr />
<div class="main">
<h1>{{msg}}</h1>
</div>
<hr />
<!-- 在bootcdn.cn中搜索链接，注意的是 此时vue3还在测试中，有很多测试版本，目前选择2.6.11 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
// 一个页面中可以有多个vue实例，他们之间互不影响
// el 表示当前vue实例的作用范围
// data 表示当前vue实例中使用到的数据
// 当vue声明变量时 vue内的内容可修改,
var app = new Vue({
el: "#app", // 把vue实例绑定在id为app的标签中
data: {
msg: "我是一段话",
title: "《从你的全世界路过》",
},
});
var app2 = new Vue({
el: ".main",
data: {
msg: "天之大",
},
});
// 不能写成app2.data.msg，可以在控制台打印app2 就知道为什么了
app2.msg = "嘿哈嘿哈";
</script>
</body>
二：v-bind数据绑定
<title>绑定图片</title>
<style>
.ball {
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- v-bind 是vue中的一个指令(命令，标签属性)，动态的绑定一个数据,可以简写为:,
后面""中的内容是一个js表达式 -->
<div id="app">
<img v-bind:src="img" alt="" />
<img :src="img" alt="" />
<img :src="'http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1594696792&t=266c917872db1e5f61b568b52211211f'"/>
<img src="" :alt="1==1?'1确实等于1':'不可能的'" />
<hr />
<div class="ball" :style="{backgroundColor: 'red'}"></div>
</div>
<script src="./libs/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
img:
"http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1594696792&t=266c917872db1e5f61b568b52211211f",
},
});
</script>
</body>
三：事件绑定 v-on:
<title>事件绑定</title>
</head>
<body>
<!-- v-on表示绑定一个事件,可以简写为@
值是一个js表达式或者一个methods方法内容
-->
<div id="app">
<button v-on:click="count++">当前的计数值为: {{count}}</button>
<button @click="count++">当前的计数值为: {{count}}</button>
<button @click="addhandle(1)">当前的计数值为: {{count}}</button>
<button @click="addhandle(5)">当前的计数值为: {{count}}</button>
</div>
<script src="./libs/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
count: 5,
},
// 表示方法，当前vue实例中可以使用到的自定义方法
methods: {
// 第一个参数默认位event对象
addhandle(step = 1) {
// 方法中使用当前实例中的数据时 需要加上this关键字
this.count += step;
},
},
});
</script>
</body>
四：数据绑定和事件绑定练习–切换小球颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>切换小球的颜色</title>
<style>
.ball {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 2rem auto;
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<div class="ball" :style="{backgroundColor: color}"></div>
<button @click="changeClor('red')">红色</button>
<button @click="changeClor('blue')">蓝色</button>
<button @click="changeClor('green')">绿色</button>
<button @click="changeClor('pink')">粉色</button>
</div>
<script src="./libs/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
color: "orange",
},
methods: {
// 改变颜色的方法
changeClor(c) {
this.color = c;
},
},
});
</script>
</body>
</html>
五：v-for循环绑定数据
<title>v-for循环</title>
</head>
<body>
<div id="app">
<ul>
<!-- v-for循环的时候需要为每一项添加一个key,key的作用是优化标签查找性能 -->
<li v-for="(item, index) in people" :key="index">{{item}}-{{index}}</li>
</ul>
<hr />
<!-- 循环一个对象组成的数组 -->
<ul>
<li v-for="item in cartoons" :key="item.id">{{item.name}}</li>
</ul>
<hr />
<ul>
<li v-for="(item, index) in nums" :key="index">{{item}}-{{index}}</li>
</ul>
<hr />
<p v-for="(item, index) in str" :key="index">{{item}}-{{index}}</p>
<hr />
<p v-for="(item, index) in obj" :key="index">{{item}}-{{index}}</p>
</div>
<script src="./libs/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
people: ["小凡", "碧瑶", "陆雪琪", "大黄", "小灰", "小白"],
cartoons: [
{
id: 1,
name: "喜羊羊",
},
{
id: 2,
name: "灰太狼",
},
{
id: 3,
name: "光头强",
},
],
nums: 5,
str: "来自星星的你",
obj: {
id: 1,
name: "鼬",
fav: "佐助",
skills: "万花筒写轮眼",
},
},
});
</script>
</body>
六：练习的内容–获取数据进行展示
因为用的是别人的借口 ，为了解决跨域问题，要把安装好的谷歌插件cors 打开，来解决跨域问题
<title>获取数据进行展示</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list" :key="item.id">
<a target="_blank" :href="'detail.html?id='+item.id">{{item.tCn}}</a>
</li>
</ul>
</div>
<script src="./libs/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
list: [],
},
methods: {
// selectOne(m) {
// console.log(m);
// },
},
});
// 原生js的内置方法，用于发起一个网络请求获取数据
// 是以promise对象的形式进行数据返回
// 网址为一个接口
fetch("https://api-m.mtime.cn/Showtime/LocationMovies.api?locationId=290")
.then((res) => res.json())
.then((data) => (app.list = data.ms));
</script>
</body>
七：v-model数据绑定
<title>数据绑定</title>
<style>
.inputs {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<!-- v-model指令可以实现表单元素和data的绑定 -->
<div id="app">
<h3 v-for="(item, index) in list" :key="index">{{item}}</h3>
<input type="text" v-model="txt" @keyup="keyUpHandle" />
<hr />
<ul>
<li v-for="(p, i) in people" :key="i">{{p.name}}-{{p.skills}}</li>
</ul>
<div class="inputs">
<input type="text" placeholder="请输入名字" v-model="person.name" />
<textarea placeholder="请输入技能" v-model="person.skills" cols="30" rows="10"></textarea>
<!-- 函数save() 的() 可以省略 -->
<button @click="save">保存</button>
</div>
</div>
<script src="./libs/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
txt: "",
list: [],
person: {
name: "孙悟空",
skills: "龟派气功",
},
people: [],
},
methods: {
keyUpHandle(e) {
// console.log(e);
// console.group("键盘抬起");
// console.log(e.target.value);
// console.groupEnd();
if (e.keyCode === 13) {
this.list.push(this.txt);
this.txt = "";
}
},
// keydownHandle(e) {
// console.group("键盘按下");
// console.log(e.target.value);
// console.groupEnd();
// },
save() {
// console.log(this.person);
// ...扩展运算符,实现对象的浅拷贝
this.people.push({
...this.person
});
},
},
});
</script>
</body>
八：过滤器 filters |
<body>
<div id="app">
<!-- | 表示使用一个过滤器,|后面跟过滤器的名字。 可以多个过滤器进行连写 -->
<h1>{{txt | tiHuanaToA | replacebTo3}}</h1>
<input type="text" v-model="txt" />
<h5>价格:{{price | yuan}}</h5>
<input type="text" v-model="price" />
</div>
<script src="./libs/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
txt: "",
price: "",
},
// 把要显示的内容在页面中进行格式化处理
filters: {
zhuanChengDaXie(v) {
return v.toUpperCase();
},
tiHuanaToA(v) {
return v.replace(/a/g, "A");
},
replacebTo3(v) {
return v.replace(/b/g, "3");
},
yuan(v) {
if (v) {
return "￥" + v + "元";
} else {
return "暂无价格";
}
},
},
});
</script>
</body>
九：显示和隐藏 v-show、v-if
<title>显示和隐藏</title>
<style>
.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<!-- v-show 指令用来控制标签的显示和隐藏，通过设置display属性实现 -->
<!-- v-if 指定通过删除或者添加标签的形式控制标签显示和隐藏，建议使用v-show -->
<div class="ball" v-if="isShow"></div>
<button @click="isShow=!isShow">toggle</button>
</div>
<script src="./libs/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isShow: true,
},
});
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
