Vue-Buckets-1

最新推荐文章于 2024-05-20 15:17:08 发布

Forever丿顾北

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量261

点赞数 1

分类专栏： bolg 文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_31435455/article/details/109861717

版权

bolg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章标题，强烈建议填写此选项

title: “Vue（一）-Vue介绍、示例与指令”

发布时间，强烈建议填写此选项，且最好保证全局唯一

date: 2019-07-01

是否打赏

showSponsor: true

分组名

categories:

Tag标签

tags:

vue 介绍、示例与指令

vue 官方文档

1. 渐进式框架

vue 是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。
vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整。
渐进式表现：声明式渲染—组件系统—客户端路由—大数据状态管理—构建工具

2. 两个核心点

（1）响应式数据绑定：
当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了 ES6 中的 Object.definedProperty 中的 setter/getter 代理数据，监控对数据的操作
（2）组合的视图组件：
即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。

3. 虚拟 DOM

利用在内存中生成与真实 DOM 与之对应的数据结构，这个在内存中生成的结构称之为虚拟 DOM。当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到 DOM 操作上。

4. MVVM

MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对 View 和 ViewModel 的双向数据绑定，这使得 ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
M：Model（数据层，也就是指数据（前端是 js））
V：View ( 也就是指 DOM 层或用户界面 )
VM : ViewModel (处理数据和界面的中间层，也就是指 Vue)

5. 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
渲染分为：命令式渲染和声明式渲染
命令式渲染：命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行
声明式渲染：只需要告诉程序想要什么效果，其他的交给程序来做
具体区别看如下代码，执行结果一样，实现方式不同。

<script type="text/javascript">
  var arr = [1, 2, 3, 4, 5];
  // 命令式渲染：关心每步，关心流程，用命令去实现
  var newArr = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    newArr.push(arr[i] * 2);
  }
  console.log(newArr);
  // 声明式渲染：不关心中间流程，只需要关心结果和实现条件
  var arr1 = arr.map(function(item) {
    return item * 2;
  });
  console.log(arr1);
</script>

6. 安装

（1）CDN 引入

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

（2）NPM 安装

// npm node安装成功后自带
npm install vue

7. 第一个页面

（1）与所有语言一样，第一个肯定是完成输出 Hello world
（2）完整代码如下：

<!--第一步：创建文件夹及html文件-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue入门之Hello world</title>
    <!--第二步：引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!--第三步:创建一个Div-->
    <div id="app">
      <!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
      {{message}}
    </div>
    <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
    <script type="text/javascript">
      var app = new Vue({
        // 创建Vue对象。Vue的核心对象。
        el: "#app", // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
        data: {
          // data: 是Vue对象中绑定的数据
          message: "Hello world", // message 自定义的数据
        },
      });
    </script>
  </body>
</html>
<!--输出结果: Hello world--->

8. 内部指令

v-if 、v-else、 v-show、v-else-if

v-if
<div v-if="firstVif">你好</div>

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

v-show
<div v-show="firstVif">你好</div>

v-else-if
<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>

注意：

v-if：在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，开销较高，在运行时条件很少改变时使用。
v-show：调整 css dispaly 属性，开销较小，在常频繁地切换时使用。

v-for

基本用法

<!-- 模板 -->
<div id="app">
  <ul>
    <li v-for="item in items">
      {{item}}
    </li>
  </ul>
</div>

<!--JS代码 -->
<script type="text/javascript">
  var app = new Vue({
    el: "#app",
    data: {
      items: [20, 23, 18, 65],
    },
  });
</script>

对象遍历

<!-- 模板 -->
<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
      <!--参数： value为值，key为键名，index为索引-->
      {{ index }}. {{ key }} - {{ value }}
    </li>
  </ul>
</div>

<!--JS代码 -->
<script type="text/javascript">
  var app = new Vue({
    el: "#app",
    data: {
      object: {
        firstName: "John",
        lastName: "Doe",
      },
    },
  });
</script>

v-text 、v-html

v-text

注意：

｛｛xxx｝｝取值有个弊端，当网速很慢或 javascript 出错时，会在页面显示｛｛xxx｝｝，Vue 提供的 v-text 可以解决这个问题

<div>{{ message }}</div>
<!-- 和下面的一样 -->
<div v-text="message"></div>

v-html
用于输出 html 代码

<span v-html="msgHtml"></span>

v-on

常规用法

<!--html-->
<div>本场比赛得分：{{count}}</div>
<button v-on:click="add">加分</button>

<!--js-->
<script type="text/javascript">
  var app = new Vue({
    el: "#app",
    data: {
      count: 1,
    },
    methods: {
      add() {
        this.count++;
      },
    },
  });
</script>

缩写(@)
指令详情的更多用法参照v-on 官方 API

<button @click="add">加分</button>

v-model

以下的 model 都需要在 data 中声明初始值：

<!--js-->
<script type="text/javascript">
  var app = new Vue({
    el: "#app",
    data: {
      count: 1,
      status: [],
      sex: "男",
      selected: "",
    },
  });
</script>

input

<input type="text" v-model="message" />

textarea

<textarea cols="30" rows="10" v-model="message"></textarea>

checkbox

<input type="checkbox" id="first" value="1" v-model="status" />
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status" />
<label for="second">无效</label>
<div>状态：{{status}}</div>

radio

<input type="radio" id="one" value="男" v-model="sex" />
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex" />
<label for="one">女</label>
<div>性别：{{sex}}</div>

select

<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<div>Selected: {{ selected }}</div>

v-bind

用于处理 html 标签的动态属性，即动态赋值。
（1）常规用法

<!--html-->
<img v-bind:src="imgSrc" width="200px" />

<!--js-->
<script type="text/javascript">
  var app = new Vue({
    el: "#app",
    data: {
      imgSrc: "http://liangxinghua.com/uploads/image/20180709/1531106987.png",
    },
  });
</script>

（2）缩写(" : ")
指令详情的更多用法参照v-bind 官方 API

<img :src="imgSrc" width="200px" />

v-pre

在模板中跳过 vue 的编译，直接输出原始值，如果在标签中加入 v-pre 就不会输出 vue 中的 data 值了

<div v-pre>{{message}}</div>

v-cloak

在 vue 渲染完指定的整个 DOM 后才进行显示。它必须和 CSS 样式一起使用

<!--CSS-->
[v-cloak] { display: none; }
<!--html-->
<div v-cloak>{{message}}</div>

v-once

只显示 DOM 第一次渲染的值，以后不改变了

<div v-once>第一次绑定的值：{{message}}</div>

9. 总结：完整示例代码

本文讲解了对 Vue 的初步了解和一些常用的基本指令，至于其他指令与用法可以去官网具体说明

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue入门之Helloworld</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- v-if -->
      <div v-if="isLogin">你好</div>
      <!-- v-else -->
      <div v-else>请登录后操作</div>
      <!-- v-show -->
      <div v-show="isLogin">你好</div>
      <!-- v-else-if -->
      <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>
      <!-- v-for基本使用 -->
      <ul>
        <li v-for="item in items">
          {{item}}
        </li>
      </ul>
      <!-- v-for高级使用 -->
      <ul>
        <li v-for="(value, key, index) in object">
          {{ index }}. {{ key }} - {{ value }}
        </li>
      </ul>
      <!-- v-text -->
      <div v-text="message"></div>
      <!-- v-html -->
      <div v-html="msgHtml"></div>
      <!-- v-on部分 -->
      <div>本场比赛得分：{{count}}</div>
      <!-- 常规写法 -->
      <button v-on:click="add">加分</button>
      <!-- @缩写 -->
      <button @click="add">加分</button><br />
      <!-- v-model input -->
      <input type="text" v-model="message" /><br />
      <!-- v-model textarea -->
      <textarea cols="30" rows="10" v-model="message"></textarea><br />
      <!-- v-model checkbox -->
      <input type="checkbox" id="first" value="1" v-model="status" />
      <label for="first">有效</label>
      <input type="checkbox" id="second" value="2" v-model="status" />
      <label for="second">无效</label>
      <div>状态：{{status}}</div>
      <!-- v-model radio -->
      <input type="radio" id="one" value="男" v-model="sex" />
      <label for="one">男</label>
      <input type="radio" id="two" value="女" v-model="sex" />
      <label for="one">女</label>
      <div>性别：{{sex}}</div>
      <!-- v-model select -->
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <div>Selected: {{ selected }}</div>
      <!-- v-model select -->
      <img v-bind:src="imgSrc" width="200px" /><br />
      <img :src="imgSrc" width="200px" /><br />
      <!-- v-pre -->
      <div v-pre>{{message}}</div>
      <!-- v-cloak -->
      <div v-cloak>{{message}}</div>
      <!-- v-pre -->
      <div v-once>第一次绑定的值：{{message}}</div>
    </div>
    <script type="text/javascript">
      var app = new Vue({
        el: "#app",
        data: {
          isLogin: false,
          type: "A",
          items: [20, 23, 18, 65],
          object: {
            firstName: "John",
            lastName: "Doe",
          },
          message: "hello Vue",
          msgHtml: "<h2>hello Vue!</h2>",
          count: 1,
          status: [],
          sex: "男",
          selected: "",
          imgSrc:
            "http://liangxinghua.com/uploads/image/20180709/1531106987.png",
        },
        methods: {
          add() {
            this.count++;
          },
        },
      });
    </script>
  </body>
</html>

Forever丿顾北

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-Buckets-1

文章标题，强烈建议填写此选项title: “Vue（一）-Vue介绍、示例与指令”发布时间，强烈建议填写此选项，且最好保证全局唯一date: 2019-07-01是否打赏showSponsor: true分组名categories:VUETag标签tags:vuevue 介绍、示例与指令vue 官方文档1. 渐进式框架vue 是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整。渐.
复制链接

扫一扫