解析Vue.js下载方式及使用步骤-tutorial js-php.cn

解析Vue.js下载方式及使用步骤

php中世界最好的语言

Lepaskan： 2018-05-22 11:01:47

asal

3359 orang telah melayarinya

这次给大家带来解析Vue.js下载方式及使用步骤，解析Vue.js下载方式及使用的注意事项有哪些，下面就是实战案例，一起来看一下。

vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

说明及下载

Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/

vue.js如果当成一个库来使用，可以通过下面地址下载： https://cn.vuejs.org/v2/guide/installation.html

Vue.js基本概念

我们下载了vue.js后，需要在页面上通过script标签引入vue.js，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。

script type="text/javascript" src="js/vue.min.js"></script>

Salin selepas log masuk

Vue代码实例（创建）

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p id="app">{{ message }}</p>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:'#app',
    data : {message:'好湿呀'}
  });
  </script>

Salin selepas log masuk

数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。还可以在Vue实例中定义方法，通过方法来改变实例中data对象中的数据，数据改变了，视图中的数据也改变。

Vue实例代码（方法）

window.onload = function(){
var vm = new Vue({
  el:'#app',
  data:{message:'hello world!'},
  methods:{
    fnChangeMsg:function(){
      this.message = 'hello Vue.js!';
    }
  }
});
}
<p id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</p>

Salin selepas log masuk

Vus.js模板语法

模板语法指的是如何将数据放入html中

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，例如：

{{ msg }}

插入的值当中还可以写表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url" rel="external nofollow" >链接文字

Salin selepas log masuk

指令

指令 (Directives) 是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。常见的指令有v-bind、v-if、v-on。

<-- 根据ok的布尔值来插入/移除 p元素 -->
<p v-if="ok">是否显示这一段
<-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮

Salin selepas log masuk

Vue.js 特点

简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
数据驱动：自动追踪依赖的模板表达式和计算属性。
组件化：用解耦、可复用的组件来构造界面。
轻量： ~24kb min+gzip，无依赖。
快速：精确有效的异步批量 DOM 更新。
模块友好：通过 NPM 或 Bower 安装，无缝融入你的工作流。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

解析Vue.js下载方式及使用步骤