使用Vue.js下载方式案例详解

这次给大家带来使用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">

Vue代码实例（创建）

nbsp;html>

  <meta>
  <title></title>


  <p>{{ message }}</p>

<script></script>
<script>
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:&#39;#app&#39;,
    data : {message:&#39;好湿呀&#39;}
  });
  </script>

数据与方法

当一个 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>
</p><p>{{ message }}</p>
<button>改变数据和视图</button>

Vus.js模板语法

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

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

{{ msg }}

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

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a>链接文字</a>

指令

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

<p>是否显示这一段

<button>按钮</button></p>

Vue.js 特点

• 简洁： HTML 模板 JSON 数据，再创建一个 Vue 实例，就这么简单。

• 数据驱动： 自动追踪依赖的模板表达式和计算属性。

• 组件化： 用解耦、可复用的组件来构造界面。

• 轻量： ~24kb min gzip，无依赖。

• 快速： 精确有效的异步批量 DOM 更新。

• 模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。

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

推荐阅读：

怎样操作Node.js使用对话框ngDialog

怎样使用JS让数组合并和对象合并

以上是使用Vue.js下载方式案例详解的详细内容。更多信息请关注PHP中文网其他相关文章！