day 73 初学vue (1)
前情提要:
vue 框架的初学习,
主要是,指令,属性,函数,计算属性,监听属性,钩子,生命周期,过滤器,阻止事件和综合案例todo list
学习准备,感谢学习资源:
vue 官网:https://cn.vuejs.org/v2/guide/instance.html
vue 菜鸟:http://www.runoob.com/vue2/vue-tutorial.html
vue 大佬简书:https://www.jianshu.com/p/c4a87e1b4ef7
一: vue的使用入门:
1:vue.js 的下载
vue.js是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。
另外几个常见的工具库：react.js /angular.js
官方网站：
官方文档：https://cn.vuejs.org/v2/guide/
vue.js目前有1.x、2.x和3.x 版本，我们学习2.x版本的。
2:vue.js库的基本使用
在github下载：https://github.com/vuejs/vue/releases
在官网下载地址： https://cn.vuejs.org/v2/guide/installation.html
vue的引入类似于jQuery，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。
下图是github网站下载的vue.js目录
总结:
. vue的使用要从创建Vue对象开始
var vm = new Vue(); . 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
var vm = new Vue({
el:"#app",
data: {
数据变量:"变量值",
数据变量:"变量值",
数据变量:"变量值",
},
}); el:设置vue可以操作的html内容范围，值就是css的id选择器。
data: 保存vue.js中要显示到html页面的数据。 . vue.js要控制器的内容外围，必须先通过id来设置。
<div id="app">
<h1>{{message}}</h1>
<p>{{message}}</p>
</div>
3:vue.js的M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。
ViewModel 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。
/assets/1544363032042.png?lastModify=1556011265)
. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }}
用法：
vue对象的data属性：
data:{
name:"小明",
}
标签元素：
<h1>{{ name }}</h1>
. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model
用法：
vue对象的data属性：
data:{
name:"小明",
}
表单元素：
<input v-model="name">
使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。
二:常用指令:
1:常用指令
指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。
在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。
指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。
因为vue的历史版本原因，所以有一部分指令都有两种写法：
2:常用指令-操控属性
2->1:格式
2->2:实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body> <div id="index">
<img :src="url" :alt="title"><br>
<input :type="type" placeholder="请输入wifi密码"> <button @click="type='text'">显示密码</button>
</div> <script>
let vm = new Vue({
el:"#index",
data:{
url:"https://www.luffycity.com/static/img/head-logo.a7cedf3.svg",
title:"路飞学成",
type:"password"
}
})
</script>
</body>
</html>
2->3:实例
3:事件操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> </head>
<body> <div id="app">
<button @click="add">+</button>
<input type="text" :value="num">
<button @click="jian">-</button>
</div>
</body>
<script>
let nv =new Vue({
el:"#app",
data:{
num: },
methods:{
add() {
this.num++
},
jian(){
if (this.num<=){
this.num=
}
else {
this.num--} }
} })
</script>
</html>
4:vue的样式操作
4>1:class
格式:
4>1>1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<style>
.box1 {
color: red;
border: 1px solid #;
} .box2 {
background-color: orange;
font-size: 32px;
} </style>
</head>
<body> <div id="app"> <!--方式一,直接class 类名值为一个对象--> <p :class="{box1:myclass1}"> 一个段落</p>
<p @click="myclass3=!myclass3" :class="{box1:myclass2,box2:myclass3 }" >又一个段落</p>
<button @click="add">
切换
</button>
</div> <script>
let mv = new Vue({
el: "#app",
data: {
myclass1: true,
myclass2: true,
myclass3: true, },
methods:{
add(){
this.myclass3=!this.myclass3 } } }) </script> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <style>
.box6{
color: red; }
.box7{
background-color: blue;
}
.box8{
font-size: 7px;
} </style>
</head>
<body>
<div id="app">
<p :class="mycls1">这是内容</p>
<p :class="mycls1">这是内容</p>
<p :class="[mycls1,mycls2]">这是内容</p> </div> <script>
let vm =new Vue({
el:"#app",
data:{
mycls1: {
box6: true,
box7: true,
},
mycls2:{
box8:true, } } }) </script> </body>
</html>
4>2:style
格式1：值是json对象，对象写在元素的:style属性中
标签元素：
<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
data数据如下：
data: {
activeColor: 'red',
fontSize:
}
格式2：值是对象变量名，对象在data中进行声明
标签元素：
<div v-bind:style="styleObject"></div>
data数据如下：
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
} 格式3：值是数组
标签元素：
<div v-bind:style="[style1, style2]"></div>
data数据如下：
data: {
style1:{
color:"red"
},
style2:{
background:"yellow",
fontSize: "21px"
}
}
代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<style> </style> </head>
<body>
<div id="app">
<p :style="{backgroundColor:bg,color:cg}" >一段字</p>
<br>
<button @click="change1"> 转换</button>
<br>
<p :style="p_style">另外一段字</p>
<br>
<button @click="p_style.backgroundColor='red'">
转换2
</button>
</div> </body> <script>
let vm =new Vue({
el:"#app",
data:{
bg:"red",
cg:"pink",
p_style:{
backgroundColor:"orange",
color:"yellow" } },
methods:{
change1(){
// alert("123")
this.bg="green" } } }) </script> </html>
5 vue 选项卡实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <style>
.box1{
background-color: red;
}
.box2{
background-color: yellow;
}
.bg{
background-color: pink;
width: 300px;
height: 300px;
}
.active{
display:none } </style>
</head> <body>
<div id="app">
<span @click="index=0" :class="index==0?'box2':'' ">视图1</span>
<span @click="index=1" :class="index==1?'box2':'' ">视图2</span>
<span @click="index=2" :class="index==2?'box2':''">视图3</span>
<div class="bg" :class="index==0?'':'active'">视图内容1</div>
<div class="bg" :class="index==1?'':'active'">视图内容2</div>
<div class="bg" :class="index==2? '':'active'">视图内容3</div> </div> </body> <script>
let vm =new Vue({
el:'#app',
data:{
index:
},
methods:{}, }) </script>
</html>
6: v-if 的使用
格式:
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> </head>
<body>
<div id="app"> <div v-if="flag">
登录<input type="text">
注册<input type="text">
</div>
<div v-else="!flag">
暂时不知道些什么
</div>
<p v-if="">{{msg}}</p> <input type="text" v-model:value="msg"> <button @click="g" >切换</button> </div>
</body>
<script>
let vm =new Vue({
el:'#app',
data:{
msg:'请输入内容',
flag:true },
methods:{
g(){
this.flag=!this.flag;
// this.flag=!this.flag }
} }) </script> </html>
7:v-for
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> </head>
<body>
<div id="app">
<table border="" bgcolor="yellow">
<tr>
<th>序号</th>
<th>id</th>
<th>书名</th>
<th>价格</th>
</tr>
<tr v-for="list ,key in lists">
<td>{{key}}</td>
<td>{{list.id}}</td>
<td>{{list.title}}</td>
<td>{{list.prcie}}</td> </tr>
</table> </div>
<!--<div id="app">-->
<!--<!–<p>{{msg}}</p>–>-->
<!--<!–<p>lists</p>–>-->
<!--<table>-->
<!--<tr v-for="list in lists">-->
<!--<td>{{list.id}}</td>--> <!--</tr>-->
<!--</table>--> <!--</div>--> </body> <script>
let vm = new Vue({
el: '#app',
data: {
msg: '',
lists: [
{"id": , "title": "book1", "prcie": },
{"id": , "title": "book2", "prcie": },
{"id": , "title": "book3", "prcie": },
{"id": , "title": "book4", "prcie": }, ] },
methods: {} }) </script> </html>
day 73 初学vue (1)的更多相关文章
- 初学vue出现空格警告的原因及其解决办法
初学vue自己新建一个vue项目来做学习demo.不过在编写代码时一直出现空格不规范的警告.严重影响初学者的热情.错误如下图所示.(这样的错误很多,但大概翻译成中文的意思都是说空格使用不规范.) 这是 ...
- 初学Vue之数量加减
效果图: HTML: <div class="count3"> <ul> <li v-for="(key,idx) in liList&qu ...
- 初学Vue 遇到Module not found:Error:Can`t resolve 'less-loader' 问题
学习vue时,导入一个子组件时遇到Module not found:Error:Can`t resolve 'less-loader' 问题,实际上时在子组件中的样式里加了这么个代码 <styl ...
- 初学Vue.js（2.x版本）
首先肯定是打开官网查看文档了,没想到我太高估了自己,看的我头晕也不知道到底说了个啥.没办法,只能另寻他法,好在有菜鸟教程.然而我还是想多了,不稀饭一点点看下去,只想快点明白它到底说了个啥.嗯,找来找去 ...
- 初学VUE 走马灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 初学vue 在做项目时遇到的问题与解决办法（使用element组件）（二）
表格每行里都有按钮 <el-table-column prop="option" label="操作" align="center" ...
- 初学Vue
指令.组件.数据 指令 指令带有前缀,v-表示它们是Vue提供的特殊属性.如: v-bind:绑定元素属性,如:v-bind:title v-if:条件,绑定DOM 的结构 v-for:循环,使用Ar ...
- 初学Vue.js，用 vue ui 创建项目会不会被鄙视
全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...
- 关于vue.js 组件的调用
包子初学vue.js,有很多不明白的地方还请大家多多指教,在组件的调用的时候,包子有点懵,因为感觉调用组件的方式非常的麻烦,每一个都要实例化,不过,通过不断询问大牛们,我找到了,动态加载组件的方法~~ ...
随机推荐
- Codeforces 1107 简要题解
文章目录 A题 B题 C题 D题 E题 F题 G题 传送门 A题 传送门 题意简述:问你能不能把一个数字串切成若干块,使得切出来的kkk个数k≤2k\le2k≤2满足a1<a2<...&l ...
- 集成 dubbo 微服务
微服务架构近年来非常的火,阿里 的dubbo 是其中的一种解决方案. dubbo 的微服务主要分为以下几部分: 1.注册中心 2.服务提供者 3.消费者 4.监控平台 1.一般流程服务提供者向注册中心 ...
- linux 修改yum 为阿里云源
为了加快yum的下载速度,我们可以讲yum源指向阿里云的资源. 操作方法: 1.备份系统的yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repo ...
- keras backend的修改
方法一: vim .keras/keras.json 修改“backend”:"tensorflow" 方法二: 每次在python文档中输入, import os os.envi ...
- 第36-37 Tomcat & SVN
1. Tomcat简介 tomcat是一个web服务器,类似nginx,apache的http nginx,http只能处理html等静态文件(jpg) 网页分为静态网页(以.html或者.htm结尾 ...
- 第13章：MongoDB-聚合操作--初体验
①MongoDB 的聚合功能 MongoDB 的聚合功能,聚合操作主要用于对数据的批量处理,往往将记录按条件分组以后,然后再进行一系列操作,例如,求最大值.最小值.平均值,求和等操作. 聚合操作还能够 ...
- Typecho 调用分类文章列表
其中pageSize后面的数字表示调用文章的数量:mid后面的数字表示调用的分类ID; 提示:Typecho分类目录ID的获取方法是把鼠标移到某分类名称上面,在浏览器状态栏显示的mid=后面的数字便是 ...
- ACtiveMQ中间件-消息的接收和发送
一.发送消息基本步骤 (1)启动ActiveMQ的的activemq.bat批处理文件或BrokerService节点 (2)创建连接使用的工厂类ActiveMQConnectionFactory通过 ...
- Hibernate利用JDBC批操作
@org.junit.Test public void testBatch() { session.doWork(new Work() { @Override public void execute( ...
- MATLAB拟合正态分布
clear;clc;close all format compact %% 正态分布的拟合 % 生成随机数 num = 50; y = randn(1000,1); x = 1:num; y = hi ...