Vue.js小白入门

实例化Vue对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="app1">
<h1>{ { name } }</h1>
<p>{ { job } }</p>
<p>{ { sayHi("methods 方法") } }</p>
<a :href="website">logan个人博客</a><br>
<p v-html="websiteTag"></p> <br>
<button @click = "greet">欢迎</button>
</div>

<script>
var app1 = new Vue({
el : "#app1",
data : {
name : "logan",
job : "fronted enginner",
website : "http://xutianshi.top",
websiteTag : "<a href='http://xutianshi.top'>v-html</a>"
},
methods : {
greet: function(){
alert("Hello Vue!")
},
sayHi : function(txt){
return "hello " + this.name + " ! " + txt
}
}
})
</script>

Vue.js入门-6-组件

组件

什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

Vue.js入门-5-表单输入绑定

表单输入绑定

基础用法

可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

文本

1
2
<input v-model="message" placeholder="edit me">
<p>Message is: { { message } }</p>

Vue.js入门-4-事件处理

事件处理

事件处理

监听事件

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

1
2
3
4
5
6
7
8
9
10
11
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked { { counter } } times.</p>
</div>

var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})

Vue.js入门-3-条件渲染、列表渲染

条件渲染、列表渲染

条件渲染

v-if

我们可以使用v-if和v-else,实现逻辑判断功能。

1
2
3
4
5
6
7
8
9
10
11
12
<div v-bind:style="styleObject" id="watch-example">
<p v-if="ok">Yes</p>
<p v-else>No</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#watch-example",
data: {
ok:true
}
})
</script>
|