好资源导航 » 文章资讯 » 实例解析Vue.js下载方式及基本概念

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

2023-09-13 01:03:05 66

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。

scripttype="text/javascript"src="js/vue.min.js">

Vue代码实例（创建）







{{message}}

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

数据与方法

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

Vue实例代码（方法）

window.onload=function(){
varvm=newVue({
el:'#app',
data:{message:'helloworld!'},
methods:{
fnChangeMsg:function(){
this.message='helloVue.js!';
}
}
});
}

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

Vus.js模板语法

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

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

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

{{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实例，就这么简单。
数据驱动：自动追踪依赖的模板表达式和计算属性。
组件化：用解耦、可复用的组件来构造界面。
轻量：~24kbmin+gzip，无依赖。
快速：精确有效的异步批量DOM更新。
模块友好：通过NPM或Bower安装，无缝融入你的工作流。

总结

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐