Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > js框架/js库

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

来源:中文源码网    浏览:168 次    日期:2024-05-03 16:19:07
【下载文档:  实例解析Vue.js下载方式及基本概念.txt 】


实例解析Vue.js下载方式及基本概念
vue.js是什么?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
说明及下载
Vue.js使用文档已经写的很完备和详细了,通过以下地址可以查看: http://cn.vuejs.org/v2/guide/
vue.js如果当成一个库来使用,可以通过下面地址下载: http://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 }}




数据与方法
当一个 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方法 -->

相关内容