Vue2.x——基础教程

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

简介

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用【来源于百度百科】。VUE官网

个人理解就是VUE 简单易用，完全靠数据驱动的一个轻量级前端框架。结合它的脚手架VUE-CLI及Webpack 可以快速搭建一个可以快速搭建大型单页应用Demo，不利于SEO。不过可以借助Nuxt，快速实现服务端渲染，解决SEO的问题。【个人观点，欢迎留言指正】

安装

  • 1、可以简单的采用引入Vue.js方式使用，但不建议这样做。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

  • 2、采用npm方式安装（推荐用法，本教程主要基于此方式）

# 升级或安装 cnpm
npm install cnpm -g
# 安装最新稳定版 VUE
$ cnpm install vue
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 基于 webpack 模板创建一个的新项目
$ vue init webpack vue-demo
#会提示你进行一些配置，可以直接默认回车
#初始化完成进入该项目下，启动项目
$ cd vue-demo
$ cnpm install
$ cnpm run dev
#会有输出 Project is running at http://localhost:8080/，你可通过这个地址访问你的项目了。

运行结果如图：

所有页面是采用.vue文件编写，文件一般分为三部分：模板，js，样式。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

常用模板语法

1、文本数据绑定

使用 {{…}}（双大括号）绑定文本数据。

<div id="app">
  <p>{{ message }}</p>
</div>

2、HTML文本绑定

使用 v-html 指令用于输出 html 代码。

<div id="app">
    <div v-html="message"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: '<p>HTML数据绑定</p>'
  }
})
</script>

3、HTML标签属性绑定

使用 v-bind 指令给HTML标签绑定属性值。

<div id="app">
    <div v-bind:class="{'iclass': isAdd}">
   v-bind 指令给HTML标签绑定属性
  </div>
  div v-bind:id="dynamicId"></div>
  <button v-bind:disabled="isDisabled">Button</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    iclass: ' ',
    dynamicId:'',
    isDisabled:true
  }
})
</script>

4、 JavaScript 表达式

数据绑定，Vue支持 JavaScript 表达式，但是只能单个表达式。

<!-- 有效表达式 -->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
<!-- 无效（错误）表达式 -->
{{ var a = 1 }}
{{ if (ok) { return message } }}

5、 常用的指令

# v-if 条件成立则会将该元素加入到DOM中渲染，对应的有v-else、v-else-if
<p v-if="condition">v-if成立</p>
# v-show  不管初始条件是什么，元素总是会被渲染，简单地基于 CSS 进行切换是否显示。
<p v-show="condition">v-show成立</p>
#一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。
# v-bind:[attributeName] 动态绑定属性值
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
#v-on:[eventName] 动态绑定事件
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

6、双向绑定 v-model

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

7、过滤器

当你需要对数据做些格式化操作时候，vue可以允许你自定义 过滤器。格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 实例 -->
<div id="app">
  {{ message | capitalize }}
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

8、迭代器v-for

用 v-for 指令可用于遍历数组，对象及数字甚至是组建。

<!-- 遍历数组示例 -->
<!-- 遍历数组元素-->
<ul id="v-for-arr">
  <li v-for="item in items">
    {{ item.name}}
  </li>
</ul>
<!-- 遍历数组元素并获取下标-->
<ul id="v-for-arr">
  <li v-for="(item, index) in items">
    {{ index}} -  {{ item.name}}
  </li>
</ul>
var vForArr = new Vue({
  el: '#v-for-arr',
  data: {
    items: [
      { name:vue' },
      { name: 'java' }
    ]
  }
})
<!-- 遍历对象的属性值-->
<ul id="v-for-object" >
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
<!-- 遍历对象的属性名和值-->
<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>
<!-- 遍历对象的属性名和值及下标-->
<div v-for="(value, name, index) in object">
  {{ index }} -  {{ name }}： {{ value }}
</div>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      id: '1',
      name: 'forObject'
    }
  }
})
<!-- 遍历取整数-->
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

组件注册

Prop

插槽

动画过度

以上是 Vue2.x——基础教程 的全部内容， 来源链接： utcz.com/z/376163.html

回到顶部