|
Vue.js下载方式及基本概念的示例分析
发表时间:2021-08-20 10:28作者:小新
小编给大家分享一下Vue.js下载方式及基本概念的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 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"></script>
Vue代码实例(创建) <!DOCTYPE html><head>
<meta charset="UTF-8">
<title></title></head><body>
<div id="app">{{ message }}</div></body><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript"> var vm=new Vue({ //el属性对应一个标签 当el对象创建后,这个标签内的区域就被Vue对象接管, //接下来就可用Vue来做一些为所欲为的事情啦 el:'#app', data : {message:'好湿呀'} }); </script>
数据与方法 当一个 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”语法 (双大括号) 的文本插值,例如:
插入的值当中还可以写表达式: {{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="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 特点
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:1953179025@qq.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 |