前情提要:

　　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/

　　　　英文：https://vuejs.org/

　　　　官方文档：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对象自动完成的。

. 如果要输出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">-->
<!--&lt;!&ndash;<p>{{msg}}</p>&ndash;&gt;-->
<!--&lt;!&ndash;<p>lists</p>&ndash;&gt;-->
<!--<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,有很多不明白的地方还请大家多多指教,在组件的调用的时候,包子有点懵,因为感觉调用组件的方式非常的麻烦,每一个都要实例化,不过,通过不断询问大牛们,我找到了,动态加载组件的方法~~ ...

随机推荐

$.cookie is not a function的错误原因
网上说的原因是:“手残导入2次jquery库文件 ” 是的,就是这个原因.引入了两次jquery.js
证明 U and V={0}时 dim(U+V)=dim(U)+dim(V)
U And V={0} 证明 dim(U+V)=dim(U)+dim(V)设{u1,u2,...,uk} 是U的基,{v1,v2...,vr}是V的基,dim(U)=k ,dim(V)=r dim(U ...
boost-实用工具：noncopyable、optional、assign
1.noncopyable 让一个类从noncopyable继承可以实现禁止对象的复制,使用需要包含头文件"boost/noncopyable.hpp"或"boost/u ...
PKG_CONFIG_PATH变量与 ld.so.conf 文件
一.编译和连接一般来说,如果库的头文件不在 /usr/include 目录中,那么在编译的时候需要用 -I 参数指定其路径.由于同一个库在不同系统上可能位于不同的目录下,用户安装库的时候也可以将库安 ...
IntelliJ IDEA 2017版 spring-boot2.0.2 搭建 JPA springboot DataSource JPA环境搭建,JPA实现非字符型设置长度
1.在github上已有配置环境,如下链接,(需要环境JDK1.8及以上版本,Tomcat1.8及以上版本,搭建maven库,使用编译器IntellJ IDEA) https://github.com ...
第20章：MongoDB-聚合操作--聚合管道--$unwind
①$unwind 在查询数据的时候经常会返回数组信息,但是数组并不方便信息的浏览,所以提供有“$unwind”可以将数组数据变为独立的字符串内容. 将文档中数组类型的字段拆分成多条,每条文档包含数组中 ...
HTML上传文件支持大文件上传,下载
上传 1.修改配置文件web.config,在<system.webServer>下面加入 <security> <requestFiltering > <r ...
noip第5课作业
1. 计算税收 [问题描述] 对某产品征收税金,在产值1万元以上收税5%:在1万元以下但在5000元或者以上的征收税3%:在5000元以下但在1000元或以上征收税2%:1000元以下的免收税 ...
include require include_once require_once
include 使用方法: include "test.php"; 一般是放在流程控制的处理部分中使用,将文件内容引入.PHP程序在遇到include语句时,才将它读进来,这种方式 ...
hdu 5093 放置战舰二分图匹配
http://acm.hdu.edu.cn/showproblem.php?pid=5093 给定一个MxN大小的图,有3种点,冰山.浮冰.海.现在希望能在图中放置尽可能多的船.船的四个方向上不能有其 ...

day 73 初学vue (1)

二:常用指令:

day 73 初学vue (1)的更多相关文章

随机推荐

热门专题

　　二:常用指令: