码迷,mamicode.com
首页 > 其他好文 > 详细

Vue入门教程 第一篇 (概念及初始化)

时间:2019-10-16 11:32:21      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:lex   ima   url   javascrip   imm   nbsp   官网   tail   执行   

注:为了本教程的准确性,部分描述引用了官网及网络内容。

安装Vue

1、使用npm安装vue:

 npm install vue 

2、下载使用js文件:

https://vuejs.org/js/vue.min.js

 

Vue概念

Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

由于其响应式设计依赖于ES6中的一些特性,因此Vue 不支持 IE8 以及更低版本浏览器(ES5)。

 

初始化

每个 Vue 应用都需要通过实例化 Vue 来实现。

1 var vm = new Vue({
2   // 选项
3 })

范例:

 1 <div id="vue_det">
 2     <h1>name : {{name}}</h1>
 3     <h1>{{details()}}</h1>
 4 </div>
 5 <script type="text/javascript">
 6     var vm = new Vue({
 7         el: ‘#vue_det‘,
 8         data: {
 9             name: "Jimmy"
10         },
11         methods: {
12             details: function() {
13                 return  this.name + " welcome! ";
14             }
15         }
16     })
17 </script>

执行结果:

 技术图片

data 用于定义属性,实例中有三个属性分别为:site、url、alexa。

methods 用于定义的函数,可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

 

Vue入门教程 第一篇 (概念及初始化)

标签:lex   ima   url   javascrip   imm   nbsp   官网   tail   执行   

原文地址:https://www.cnblogs.com/JHelius/p/11684069.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!