VUE 基础01-基础入门_第1章 vue基础入门-CSDN博客

本文链接：https://blog.csdn.net/weixin_45442617/article/details/107585902

VUE 基础01-基础入门

Vue概述:

Vue的创建者 : 尤雨溪

2014年2月,Vue正式发布
2015年10月27日,正式发布1.0.0

2016年4月27日,发布2.0的预览版本

Vue : 渐进式JavaScript框架

渐进式:声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建

官网: https://cn.vuejs.org/v2/guide/

易用:熟悉HTML,CSS,JavaScript知识后,可快速上手Vue
灵活:在一个库和一套完整框架之间自如伸缩
高效:20kb 运行大小,超快虚拟DOM

传统开发模式对比(js 与jq)

图片因为上传不上去所以暂时没有

Vue的基本使用步骤:

1.需要基本填充数据的标签

2.引入Vue.js库文件

3.可以使用Vue的语法做功能

4.把Vue提供的数据填充到标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
  //1.需要基本填充数据的标签
  <div id="div">
    {{msg}}
  </div>
  //2.引入Vue.js库文件
  <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el:'#div',
        data:{
          msg:'hello Vue'
        }
      });
    </script>
</body>
</html>

 参数分析:
  el:元素的挂载位置(值可以是css选择器也可以是DOM元素)
 data:数据模型(值是一个对象)

{{}} 插值表达式用法:
1. 将数据填充到html页面
2.插值表达式支持基本的计算操作也就是算术运算

指令

指令的本身就是自定义属性
指令的格式 : 以 v- 开始(比如v- cloak)

v-cloak指令用法
插值表达式存在的问题:"闪动"
如何解决该问题: 使用 v-cloak 指令
原理:先隐藏,替换好值之后在显示最终的值

数据响应式

响应式:

1. html5中的响应式(屏幕尺寸方式变化导致样式发生变化)

2.数据的响应式(数据内容变化导致页面内容的变化)
- 数据绑定
  
  数据绑定:将数据填充到标签中
  - v-once 只编译一次
    
    显示内容之后不在具有响应式功能

双向数据绑定

 v-model指令用法

 <input type="text" v-model="msg">

MVVM设计思想

M (model)

V (view)

VM(View-Model)

Vue事件绑定

1.v-on指令用法(点击事件)

eg:

 <input type="button" v-on:click='num++'/>

 v-on 简写形式

 <input type="button" @click='num++'/>

2.事件函数的调用方式

直接绑定函数名称

<button @click='fun'>点击按钮</button></button>

调用函数

<button @click='fun()'>点击按钮</button></button>

编写的函数放在Vue对象的里面

格式如下:

<button @click='fun(1,2)'>点击按钮</button></button>  
<script>
        var vue =new Vue({
            el:'#div',
            data : {
               msg: 0
            },
            methods:{
                fun:function(){
                    this.msg++;
                }
            }
        });
    </script>

method为属性里面可以写多个函数

fun 为函数名称

3.事件函数参数传递

普通参数和事件对象

  <script>
        var vue =new Vue({
            el:'#div',
            data : {
               msg: 0
            },
            methods:{
                fun:function(p1 ,p2){
                    alert(p1+p2)
                }
            }
        });
    </script>

事件绑定-参数传递

1.如果事件直接绑定函数名称,那么迷人会传递事件对象作为函数的第一个参数

2.如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递.并且事件对象的名称必须式$event

4.事件修饰符

.stop阻止冒泡

冒泡:当一个事件被触发时,事件将随着该节点继承各个父类节点的事件

例如:

<div id="div" @click="fun()" >
      <div @click="fun(1,2)" >{{msg}}</div>   
    <button @click.stop="fun1($event)">点击获取对象</button>                                                                             
    </div>
    <script src="js/vuejs-2.5.16.js"></script>
    <script>
        var vue =new Vue({
            el:'#div',
            data : {
               msg: 0
            },
            methods:{
                fun:function(){
                  this.msg++;
                },
                fun1:function(event){
                   alert(event.target.innerHTML);
                }
            }
        });
    </script>

可以通过.stop来控制停止冒泡,避免一些事件被触发