Vue.js下载方式及基本概念的示例分析-创新互联-成都快上网建站

Vue.js下载方式及基本概念的示例分析-创新互联

小编给大家分享一下Vue.js下载方式及基本概念的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联建站是一家专业提供上饶企业网站建设,专注与成都做网站、网站建设、外贸营销网站建设H5页面制作、小程序制作等业务。10年已为上饶众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

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代码实例(创建)



  
  


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

数据与方法

当一个 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!';
    }
  }
});
}

{{ 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下载方式及基本概念的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文名称:Vue.js下载方式及基本概念的示例分析-创新互联
分享地址:http://kswjz.com/article/ccjdie.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流