环境安装

vuejs.org----vue官网
在官网上可以导包,引进Vue.

<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>

node安装包(nodejs.org网址)
node -v 查看版本

Vue.js-----渐进式js框架(易用,灵活,高效,没那么多限制。)

实例化Vue 对象
new Vue({
el:''#vue-app'',
data:{
name:''展示到浏览器
的内容'',
job:'工程师'},
website:''https://unpkg.
methods:{
greet:function(){
return 'good morning';}
}
});
el ---elemen需要获取的元素,一定是html中的根容器元素
data----用于数据存储
methods---用于存储方法或者实例
data-binding----给属性把绑定对应的值
v-bind 绑定属性
v-on

使用修饰符时,顺序很重要,相应的代码会一同样的顺序产生,因此,用哪个@click.prevent.self会阻止所有的点击,而@click.self.prevent只会阻止元素上的点击

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入响应式 追踪变化: 把普通js对象传给Vue实例的data选项,Vue将使用Object.defineProp...
    冥冥2017阅读 4,897评论 6 16
  • 第一章 Vue概述 what? Vue是实现UI层的渐进式js框架,核心库关注视图层,简单的ui构建,复杂的路由控...
    fastwe阅读 747评论 0 0
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,112评论 0 2
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,383评论 0 25
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,245评论 0 6