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,有很多不明白的地方还请大家多多指教,在组件的调用的时候,包子有点懵,因为感觉调用组件的方式非常的麻烦,每一个都要实例化,不过,通过不断询问大牛们,我找到了,动态加载组件的方法~~ ...
随机推荐
- 2019.02.07 bzoj4316: 小C的独立集（仙人掌+树形dp）
传送门 题意:给出一个仙人掌森林求其最大独立集. 思路:如果没有环可以用经典的树形dpdpdp解决. fi,0/1f_{i,0/1}fi,0/1表示第iii个点不选/选的最大独立集. 然后fi,0+ ...
- 2018.11.17 hdu5829Rikka with Subset（ntt）
传送门 nttnttntt基础题. 考虑计算每一个数在排名为kkk时被统计了多少次来更新答案. 这样的话,设anskans_kansk表示所有数的值乘上排名为kkk的子集数的总和. 则ansk=∑i ...
- 利用JDK自带的keytool生成SSL证书然后导入到SpringBoot
一:生成命令如下(这一步生成的暂不知道干嘛用的) E:\Desktop\Documents\证书>keytool -genkey -alias tomcat -keypass - -validi ...
- css3 box-sizing详解。
人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性. box-sizing: 盒大小,盒模型. 我们经常遇到左右模块宽度为50%,加个边框会掉下去,加一个 ...
- [小结]了解innodb锁
原创文章,会不定时更新,转发请标明出处:http://www.cnblogs.com/janehoo/p/5603983.html 背景介绍: innodb的锁分两类:lock和latch. 其中la ...
- Java实现FTP批量大文件上传下载篇1
本文介绍了在Java中,如何使用Java现有的可用的库来编写FTP客户端代码,并开发成Applet控件,做成基于Web的批量.大文件的上传下载控件.文章在比较了一系列FTP客户库的基础上,就其中一个比 ...
- idea常用插件介绍
常用插件 mybatis mapper 选择plugins,搜索mybatis plugin 激活教程 使用 插件的使用
- Matlab绘图添加直角坐标轴
绘制y=x^2,并添加直角坐标轴. clear;clc;close all %% 绘制方程 x = -10:0.01:10; figure; y = x.^2-30; plot(x,y,'k','li ...
- HashMap原理、源码、实践
HashMap是一种十分常用的数据结构,作为一个应用开发人员,对其原理.实现的加深理解有助于更高效地进行数据存取.本文所用的jdk版本为1.5. 使用HashMap <Effective JAV ...
- jQuery插件初级练习4答案
html: $("p").log().css("color","red") jQuery: $.fn.extend({ log: funct ...