Vue基础学习1
2018-01-17 本文已影响0人
沃土前端社区_子鸣
1、vue的介绍
- Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
- Vue 只关注视图层， 采用自底向上增量开发的设计。
- Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2、Vue的简单应用,常用语法
1、vue的引入
新手不建议直接使用webpack自动化构建vue应用，这个我们后面会讲。现讲2种简单的方式
(1)直接引用，引用地址为：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
(2)直接下载，在引入下载包使用。
2、vue的简单渲染实例
- 文本赋值 {{value}}
- 表单赋值 v-model
- 属性绑定 v-bind或 ":"
- 事件绑定 v-on: 或 "@"
- 实例化vue：new Vue
html代码:
<html>
<head>
<title>vue的简单实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p :class="colorClass">这是插入的一段文本{{msg}}</p>
<input type="text" v-model="msg"/>
<button @click="prompt">点击弹出输入值</button>
</div>
<body>
</html>
js代码：(本例使用的版本为v2.5)
var vm = new Vue({
el:"#app", //绑定根节点
data:{ //数据源
msg:"", //消息初始化为空
colorClass:"classa"
},
methods:{
prompt:function(){
alert(this.msg);
}
}
})
第一小节到此结束，附一张vue的生命周期图，后面的很多场景都需要用到
image.png
