Vue.js下载方式及基本概念的示例分析

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

  
  


  {{ message }}

window.onload = function(){
var vm = new Vue({
  el:'#app',
  data:{message:'hello world!'},
  methods:{
    fnChangeMsg:function(){
      this.message = 'hello Vue.js!';
    }
  }
});
}

{{ message }}
改变数据和视图

Vus.js模板语法

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

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

{{ msg }}

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

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

指令

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

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

Vue.js 特点

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

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

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

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

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

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

以上是“Vue.js下载方式及基本概念的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！