Vue.js用法详解

2024-09-28 01:32:10

vue.js 教程

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

前言

　前段时间为了一个数据查询的项目自学了Vue，感觉这款框架还是很不错的，今天就整理整理这个框架如何使用，希望对正在学这个框架的小伙伴有所帮助~

首先，我们先来了解一下Vue：

　　Vue.js是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是，Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件和 Vue生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供有力驱动。所以，Vue其实还是很强大的。

1.Vue.js的安装与模版语法

Vue的使用非常简单，直接下载Vue.js或者Vue.min.js导入就可以使用。

1-1 模板语法

　　Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

　　Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

　　结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

1. html模版

　　html模版：基于DOM的模版，模版都是可解析的有效的HTML

插值：

　　文本：使用“Mustache”语法（大括号）{{ value }}；作用：替换实例上的属性值，当值改变时，插值内容会被自动更新。也可使用v-text="value"代替。

　　<p>{{ value }}<p> 等价于 <p v-text="value"></p>

　　原生的html：双大括号输出的文本，不会解析html标签。也就是说当实例的data为html标签时，不能解析而是直接输出出来。此时如想要解析，可使用v-html="value"代替。

new Vue({
  data:{
    value: `<span>我是一个span标签</span>`
  }
});
<p>{{ value }}<p>  页面展示 => <span>我是一个span标签</span>
<p v-html="value"><p>  页面展示 => 我是一个span标签

需要注意的是，有时候因为一些网络延迟等原因，用户会在也买年中先看到{{ xxx }}，然后才有数据。我们若想避免此效果，可用v-text="xxxx"代替。

属性：使用v-bind进行绑定，可以响应变化。

<h2 :class="{red:show}">标题</h2> => 注意此处的show为data内的一个布尔值数据，若真则添加red的class，若假则移除red的class，

使用javascript表达式：可以写简单的表达式。（可以简单的三目运算，但是不可以写if语句），以后会有计算属性。

{ 1+2 }
{ true? "yes":"no" }

2. 字符串模版

template字符串

tempalte => 选项对象的属性

模版将会替换挂载的元素。挂载元素的内容都会被忽略，根节点只有一个，将html结构写在一对script标签中，设置type="x-template"。

<body>
  <div id="box">

  </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var str = '<h2>hello pink!</h2>'
    var vm = new Vue({
      el: '#box',
      template: str
    });
  },false);
</script>

说明权重比较高，直接“代替”挂载点，把原来的html替换后显示。

//代码片段这个就是利用script标签对内定义模版，局限性：不能跨文件使用，一个页面中可以使用
<body>
  <div id="box">

  </div>
</body>
<script src="vue.js"></script>
<script type="x-template" id="str">
  <p>我是一个p标签</p>
</script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#box',
      template: '#str'
    });
  },false);
</script>

Vue实例，每一个应用都是通过Vue这个构造函数创建根实例（root instance）启动New Vue（选项对象）。需要传入选项对象，对象包含挂在元素，数据，模板、方法等。

el：挂载元素选择器 --- String|HtmlElement
data：代理数据 --- Object|Function
methods：定义方法 --- Object

Vue代理data数据，每个vue实例都会代理其data对象里所有的属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会更新视图。

Vue实例自身属性和方法，暴露自身的属性和方法,以“$”开头的，例如：$el、$data。。。

var vm = new Vue({
    el: '#app',
    data: {
     message: 'hello,Datura!!!'
    }，
    methods: {
      test (){
        alert(1);
      }
    },
    compontents:{
    //这里存放组件
    }
   });
 /* vm就是new出来的实例 */
 console.log(vm.$data);//也就是数据data，后面还有很多挂载在vm（new出来的）实例上的属性
//代码片段放在template标签里，并给一个id名
<body>
  <template id="tem">
    <p>我是template</p>
  </template>
  <div id="box">

  </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#box',
      template: '#tem'
    });
  },false);
</script>

3. 模版—render函数

render函数很接近编辑器
render => 选项对象属性

数据对象属性

class: {}, => 绑定class，和v-bind:class一样的API
style: {}, => 绑定样式，和v-bind:style一样的API
attrs: {}, => 添加行间属性
domProps: {}, => DOM元素属性
on: {}, => 绑定事件
nativeOn: {}, => 监听原生事件
directives: {}, => 自定义指令
scopedSlots: {}, => slot作用域
slot: {}, => 定义slot名称 和组件有关系，插曹
key: "key", => 给元素添加唯一标识
ref: "ref", => 引用信息
2Vue.js的条件、循环语句
2-1条件语句
v-if ：根据值的真假，切换元素会被销毁、重建； => 在dom中已消失
v-show ：根据值的真假，切换元素的display属性；
v-else ：条件都不符合时渲染；
v-else-if ：多条件判断，为真则渲染；

一、V-if

条件判断使用 v-if 指令：

<div id="app">
  <p v-if="seen">现在你看到我了</p>
  <template v-if="ok">
   <p>哈哈哈，打字辛苦啊！！！</p>
  </template>
</div>
<script>
new Vue({
 el: '#app',
 data: {
  seen: true,
  ok: true
 }
})
</script>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

二、v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块：

随机生成一个数字，判断是否大于0.5，然后输出对应信息：

<div id="app">
  <div v-if="Math.random() > 0.5">
   Sorry
  </div>
  <div v-else>
   Not sorry
  </div>
</div>

<script>
new Vue({
 el: '#app'
})
</script>

三、v-show

我们也可以使用 v-show 指令来根据条件展示元素：

<div id="app">
  <h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
 el: '#app',
 data: {
  ok: true
 }
})
</script>

四、v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

判断 type 变量的值：

<div id="app">
  <div v-if="type === 'A'">
   A
  </div>
  <div v-else-if="type === 'B'">
   B
  </div>
  <div v-else-if="type === 'C'">
   C
  </div>
  <div v-else>
   Not A/B/C
  </div>
</div>
<script>
new Vue({
 el: '#app',
 data: {
  type: 'C'
 }
})
</script>

[v-show、v-if的使用与比较]

① v-show ：根据值的真假，切换元素的display属性；

v-show的元素会始终渲染并保持在DOM中。

v-show并不支持template语法。

② v-if是真实的条件渲染，因为他会确保条件块在切换当中适当的销毁与重建条件块内的事件监听器和子组件。

③ v-if有更高的切换消耗而v-show有更高的初始渲染消耗。

如果需要频繁切换使用v-show更好，如果在运行时条件不大可能改变，使用v-if比较好

2-2 循环语句 v-for

① 语法：v-for="x in items"

　　　　x是索引；items是数组，这样进行遍历

② v-for循环是不断创建新的标签，标签里的内容，我们决定，一般都是放在数组里，然后遍历显示出来。也可以放对象，遍历对象。

③ 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

<body>
  <div id="app">
    <ul>
      <li v-for="(val,key) in fruitsArr">{{ val }} => {{ key }}</li> //循环出来的列表项
    </ul>
  </div>
</body>
<script src="../vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#app',
      data:{
        fruitsArr:['apple','banana','orage','pear']  //数据源
      }
    });
  },false);
</script>

总结

以上所述是小编给大家介绍的Vue.js用法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Vue.js自定义指令的用法与实例解析

市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来.用自定义指令可以非常方便的实现这个功能. 效果: 自定义
详解 vue.js用法和特性

前言最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j
vue.js中$watch的用法示例

前言 vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch() ; <template> //观察数据为字符串或数组 <input v-model="example0"/> <input v-m
Vue.js用法详解

vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 前言前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: V
Vue props用法详解(小结)

Vue props用法详解组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat
JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】原创

本文实例讲述了JavaScript语法高亮库highlight.js用法.分享给大家供大家参考,具体如下: highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用. 1.获取highlight.js库,用户可以从官网获取: 地址:https://hig
Vue.js 插件开发详解

前言随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段,比较少自己开发.所以接下来会通过一个简单的 vue-toast 插件,来了解掌握插件的开发和使用. 认识插件想要开发插件,先要认识一个插件是什么样子的. Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象: MyP
JavaScript封装的常用工具类库bee.js用法详解【经典类库】

本文实例讲述了JavaScript封装的常用工具类库bee.js.分享给大家供大家参考,具体如下: bee.js下载地址: github下载地址:https://github.com/shadowOfCode/bee.js 或点击此处本站下载. 使用:  <script type=&q
基于vue.js中事件修饰符.self的用法(详解)

.self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''
Vue.js 中的 v-show 指令及用法详解

1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc
Vue.js slot插槽的作用域插槽用法详解

目录没有插槽的情况 Vue2.x 插槽有插槽的情况具名插槽没有slot属性插槽简单实例应用作用域插槽 ( 2.1.0 新增 ) Vue3.x 插槽插槽作用域插槽没有插槽的情况 <div id="app"> <child> <span>1111</span> </child> </div> <script> // 注册子组件 Vue.component("child"
关于vue中 $emit的用法详解

1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&
Vue 中mixin 的用法详解

说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

Vue.js用法详解

相关推荐

随机推荐