实例解析Vue.js下载方式及基本概念

网络编程 2025/2/27 佚名

3 2 1

vue.js是什么？

Vue (读音 /vju"color: #ff0000">说明及下载

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="/UploadFiles/2021-04-02/vue.min.js">

Vue代码实例（创建）




<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="app">{{ message }}</div>
</body>
<script type="text/javascript" src="/UploadFiles/2021-04-02/vue.min.js">

数据与方法


当一个 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!';
    }
  }
});
}
<div id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</div>


Vus.js模板语法


模板语法指的是如何将数据放入html中
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，例如：
{{ msg }}
插入的值当中还可以写表达式：


{{ number + 1 }}
{{ ok "url" rel="external nofollow" >链接文字


指令


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


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


Vue.js 特点



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

总结
以上所述是小编给大家介绍的Vue.js下载方式及基本概念，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

vue.js下载方式,vuejs基本概念

标签：

vue.js下载方式,vuejs基本概念

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“实例解析Vue.js下载方式及基本概念”

实例解析Vue.js下载方式及基本概念

暂无“实例解析Vue.js下载方式及基本概念”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2025年02月27日

实例解析Vue.js下载方式及基本概念

vue.js下载方式,vuejs基本概念

Node.js使用cookie保持登录的方法

AngularJS模态框模板ngDialog的使用详解

评论“实例解析Vue.js下载方式及基本概念”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接