Vue基础总结

最新推荐文章于 2023-04-12 21:16:53 发布

丿第二名

最新推荐文章于 2023-04-12 21:16:53 发布

阅读量473

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_37293470/article/details/121087368

版权

vue基础

Vue.js的定位是一个渐进式框架前端三大mvvm框架 vue , react ,angular
Vue.js受到越来越多关注的一个重要原因：你只需要具备基本的HTML/JavaScript/CSS 基础，就可以快速上手，让你用上这些现代Web开发中的先进技术来提高你的生产力：
与Angular和React出自巨型公司不同，Vue.js基本上是以作者（尤雨溪/Evan YOU）

尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，现任职于纽约Google Creative Lab。

2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 库，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统

2016年9月3日，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端

hello Vue.

1.引入vue.js库

<script src="vue.js"></script>

创建vue实例

<script>
   new Vue({
      el：'#app',
      data: {msg:'Hello,Vue.js 2'}
   })
</script>

完整html导入

<div id="app">
   hello Vue!
</div>

完整的helloWorld代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>

模板语法-文本语法

文本

数据绑定最常见的形式就是使用{{}}语法 (双大括号)

<span> {{message}}</span>

也可以使用v-text方法

<span v-text="message"></span>

html文本

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

<div id="app">
       <div v-html="rawMsg"></div>
   </div>
   <script type="text/javascript">
       var app=new Vue({
           el:'#app',
           data:{
               message:'hello Vue!',
               rawMsg:'<h1>你好vue</h1>'
           }
       })
   </script>

模板语法-属性

给html标签绑定一个属性值应该使用 v-bind:属性名称

以下代码给h1绑定一个新的id和title属性

<div id="app">
  <h1 v-bind:id="dyId" v-bind:title="dyTitle">我是一行快乐的标题</h1>
</div>
 <script type="text/javascript">
     var app=new Vue({
         el:'#app',
         data:{
             dyId:'best',
             dyTitle:'看见我的人一生平安'
         }
     })
 </script>

渲染结果是：

<h1 id="best" title="看见我的人一生平安">我是一行快乐的标题</h1>

绑定属性也是可以直接简写：

<h1 :id="dyId" :title="dyTitle">我是一行快乐的标题</h1>

使用 JavaScript 表达式

在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{4+5}} 
{{ ok ? '是的' : '不是' }}
{{['第二','第二名'].join('--')}}

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
 
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

条件指令 v-if

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。

<div v-if="isLogin">你好，vue！</div>

也可以用 v-else 添加一个“else 块”：

<div v-else="">请登录后操作</div>

<div id="app">
    <div v-if="isLogin">你好：木木</div>
    <div v-else="">请登录后操作</div>
</div>
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
           isLogin:false
        }
    })
</script>

v-show指令

另一个用于根据条件展示元素的选项是 v-show 指令

<h1 v-show="isShow">Hello!</h1>

v-show 只是调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

列表渲染

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

基本用法

<li v-for="item in items">
   {{item}}
</li>

<var app=new Vue({
  el:'#app',
  data:{
      items:['angular','react','vue',jquery]
  }
})

对象循环输出

<li v-for="item in items">
   {{item.name}}--{{item.age}}
</li>

var app=new Vue({
  el:'#app',
  data:{
      items:[
         {name:"mumu", age:18},
         {name:"zql", age:22},
         {name:"曾庆林", age:28},
      ]
  }
})

索引

<li v-for="(item, index) in items">
   {{item.name}}-{{index}}-{{item.age}}
</li>

结果是

<li>mumu-0-18</li>
<li>zql-0-22</li>
<li>曾庆林-0-28</li>

key

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。

<li v-for="(item,index) in items" :key="index">
   {{item}}
</li>

var app=new Vue({
  el:'#app',
  data:{
      items:['mumu','曾庆林','木木','mumu']
  }
})

如果不绑定tip 重复的’mumu’ 再列表循环在列表循环会报错
监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="app">
<button v-on:click="counter += 1">加 1</button>
<p>按钮被点击了 {{ counter }}次.</p>
</div>

var example1 = new Vue({
el: '#ap',
  data: {
    counter: 0
  }
})

事件处理方法

<div id="app">        
   <button v-on:click="greet">问候</button>
</div>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         name:'Vue.js'
      },
      methods:{
         greet:function(event){
            // 'this' 在方法里指向当前 Vue 实例
            alert('你好'+this.name+'!');
            // 'even' 是元生 DOM事件
            if(event){
               alert(event.target.tagName)
            }
 
         }
      }
   })
   // 也可以用JavaScript 直接调用
   app.greet();
</script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.once

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
 
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
  
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
 
<input v-on:keyup.page-down="onPageDown">

按键码
使用 keyCode 特性也是允许的：

<input v-on:keyup.13="submit">

Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

表单输入绑定

v-model

你可以用 v-model 指令在表单 >input<、>textarea< 及 >select< 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

多个复选框

<div id="app">
  <input type="checkbox" id="name1" value="第二" v-model="checkedNames">
  <label for="name1">第二</label>
  <input type="checkbox" id="name2" value="第二名" v-model="checkedNames">
  <label for="name2">第二名</label>
  <input type="checkbox" id="name3" value="second" v-model="checkedNames">
  <label for="name3">second</label>
  <br>
  <span>选择的名字是: {{ checkedNames }}</span>
</div>
   <script>
      var app = new Vue({
         data:{checkedNames:[]},
       })
   </script>
<!-- 结果 -->
<!-- 选择的名字是:["第二","第二名"，"second"] -->

修饰符
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<input v-model.number="age" type="number">

.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ msg.split('').reverse().join('') }}
</div>

这里是想要显示变量 msg 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

当你需要从现有数组得到新的数据这个时候你就需要计算了computed

<div id="example">
  <p>原来的信息: "{{ msg }}"</p>
  <p>计算翻转的信息: "{{ rmsg }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    msg: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    rmsg: function () {
    // `this` 指向 vm 实例
    return this.msg.split('').reverse().join('')
    }
  }
})

结果：
原来的信息: “hello}”

计算翻转的信息: “olleh”

侦听器

Vue 通过 watch 来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div id="app">
    <p>计数器: {{ num }}</p>
    <button @click="num++">点我</button>
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        num: 1
    },
    watch:{
      'num': function(nval, oval) {
        console.log('num变化 :' + oval + ' 变为 ' + nval + '!');
      },     
    }
});
 
</script>

每次点击按钮都会输出：

num变化 :1变为2!

num变化 :2变为3!

…

对象变化监听

我们需要监听对象的属性值是否发生改变用

<div id="app">
<p>计数器: {{ num }}</p>
<button @click="num.age++">点我</button>
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        num: {age:1}
    },
    watch:{
      'num':{
        handler:function(nval, oval) {
          console.log('num变化 :' + oval.age + ' 变为 ' + nval.age + '!')
          },
        deep:true     
        }
    }
});
</script>

自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点

<div id="app">
  <p>页面载入时，input 元素自动获取焦点：</p>
  <input v-focus="">
</div>
  
<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

指令的值数据-简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子

<div id="app">
  <p>页面载入时，input 元素自动获取焦点：</p>
  <input v-focus="true">
</div>
  
<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: function (el,data) {
        // 聚焦元素
        //如果指令的值是true则获取焦点
        if(data.value==true){
           el.focus()
        }
       
    }
  }
})
</script>

类的绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的真假

你可以在对象中传入更多属性来动态切换多个 class

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data 如下

data: {
  isActive: true,
  hasError: false
}

渲染结果为

<div class="static active"></div>

绑定的数据对象不必内联定义在模板里：

<div v-bind:class="classObject"></div>

数据如下

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

classObject对象可以通过计算动态获得

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为

<div class="active text-danger"></div>

绑定内联样式-对象语法

对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名

<div v-bind:style="{ color: activeColor, fontSize: '24px' }"></div>

data: {
  activeColor: 'red',
}

渲染结果

<div style="color:red, font-size: 24px"></div>

直接绑定到一个样式对象通常更好，这会让模板更清晰：

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

对象语法常常结合返回对象的计算属性使用。
vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

动画

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

语法

<transition name="过渡名称">
   <div></div>
</transition>

简单列子

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

过渡的类名

在这里插入图片描述
1.v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2.v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3.v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5.v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6.v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

CSS 动画 html

<div id="app">
      <button @click="flag=!flag">切换</button>
      <div>
        <transition name="fade">   
            <img src="img/sun.jpg" height="260" v-show="flag" alt="">
        </transition>
      </div>
       
       
</div>

js

new Vue({
  el:"#app",
  data:{flag:true},
  methods:{},
})

css

@keyframes fadeIn{
  0%{ opacity: 0; transform:scale(0.7)}
  90%{opacity: .8;transform:scale(1.2)}
  100%{opacity: 1;transform:scale(1)}
}
@keyframes fadeOut{
  from{ opacity: 1; transform:scale(1)}
  to{opacity: 0;transform:scale(0.7)}
}
.fade-enter-active{
  animation: fadeIn .7s ease;
}
.fade-leave-active{
  animation: fadeOut .2s ease;
}

自定义过渡的类名
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

html

<div id="app">
  <button @click="flag=!flag">切换</button>
  <div>
    <transition enter-active-class="animated rotateIn" leave-active-class="animated bounceOutDown">   
      <img src="img/sun.jpg" height="260" v-show="flag" alt="">
    </transition>
  </div>   
</div>

js

new Vue({
  el:"#app",
  data:{flag:true},
})

导入其他css类库

<link rel="stylesheet" href="css/animate.min.css">

动画模式
同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<div id="app">   
  <transition name="fade" mode="out-in">       
    <button v-if="!flag" @click="flag=!flag" :key="'off'">off</button>
    <button v-if="flag" @click="flag=!flag" :key="'on'">on</button>
  </transition>  
</div>

new Vue({
  el:"#app",
  data:{flag:true}
})

@keyframes fadeIn{
  0%{ opacity: 0;}      
  100%{opacity: 1;}
}
@keyframes fadeOut{
  from{ opacity: 1;}
  to{opacity: 0;}
}
.fade-enter-active{
  animation: fadeIn .7s ease;
}
.fade-leave-active{
  animation: fadeOut .2s ease;
}

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们

动画组

怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用组件

不同于，它会以一个真实元素呈现：默认为一个。你也可以通过 tag 特性更换为其他元素。
过渡模式不可用，因为我们不再相互切换特有的元素。
内部元素总是需要提供唯一的 key 属性值。

<transition-group name="slide" tag="ul">       
  <li class="item p15" v-for="(item,index) in listing" :key="item">
 
</li></transition-group>

/* 定义进 的关键帧动画*/
@keyframes slideIn{
  from{ opacity: 0; transform: translateY(-80px);}
  to{opacity: 1; transform: translateY(0px);}
}
/* 定义出 的关键帧动画*/
@keyframes slideOut{
  from{ opacity: 1; transform: translateX(0);}
  to{opacity: 0; transform: translateX(-100%);}
}
 
 
/*enter-active 进入时候添加class名称*/
.slide-enter-active{
  animation: slideIn .5s ease;
}
/*离开的时候添加的class 名称*/
.slide-leave-active{
  animation: slideOut .3s ease;
  position: absolute;
}
/*正在移动元素 添加的class名称（vue 内置添加的）*/
.slide-move{
  transition: all .3s ease;
}

v-move 特性，它会在元素的改变定位的过程中应用
v-move 对于设置过渡的切换时机和过渡曲线非常有用

丿第二名

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础总结

vue基础Vue.js的定位是一个渐进式框架前端三大mvvm框架 vue , react ,angularVue.js受到越来越多关注的一个重要原因：你只需要具备基本的HTML/JavaScript/CSS 基础，就可以快速上手，让你用上这些现代Web开发中的先进技术来提高你的生产力：与Angular和React出自巨型公司不同，Vue.js基本上是以作者（尤雨溪/Evan YOU）尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设
复制链接

扫一扫