您的位置：首页 > Web前端 > Vue.js

Vue.js入门学习知识点

2018-11-29 17:09 267 查看

 

Vue.js安装方法：head标签中引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>{{msg}}</div>
<div v-text="msg"></div>
<div v-html="template"></div>
<div @click="handleClick">{{msg}}</div>
<div :title="content">{{content}}</div>
<input v-model="content" />
<div>
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<div v-show="show">hello</div>
<div v-if="show">world</div>
<button @click="handleClick2">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world",
template:"<h1>hello world</h1>",
content:"this is world",
firstName:'',
lastName:'',
count:'',
show:true,
list:[1,2,3]
},
methods:{
handleClick: function () {
this.msg="world"
},
handleClick2: function () {
this.show = !this.show
}
},
computed:{
fullName: function () {
return this.firstName+' '+this.lastName
}
},
watch:{
fullName: function () {
this.count ++
}
}
})
</script>
</body>
</html>

 

一般通过id创建Vue实例，常见参数如下：

  • el：" " // 表示这个Vue实例和哪个DOM元素进行绑定；被绑定的DOM元素，也叫挂载点
  • data：" "// 数据一般都放在data里面，DOM元素直接调用需要用{{ }}包裹起来；
  • template：" "// 可以直接编写DOM元素代码，也叫模版；
  • methods：" " // 事件的方法一般都放在methods里；
  • computed：" " // 新建一个计算属性，取值是由其他数据项计算出来的结果；
  • watch：" " // 监听器，作用是监听某一个数据项的值是否发生了变化，如果变化执行里面的业务逻辑；

 

DOM元素绑定常见使用方法：

  • v-text=" " // 给模版绑定数据，字符串形式；
  • v-html=" " // 给模版绑定数据，会对内容的html标签进行转义；
  • v-on：click（事件）="handleClcik（方法）" // 事件绑定写法，可以简写成 @click="handleClcik"；
  • v-bind：title（属性）=" " // 属性绑定写法，可以简写成 ：title=" "；
  • v-model=" " // 双向数据绑定；
  • v-show=true || false // 当值为 true 时，显示DOM元素，当值为 false 时，给DOM元素添加一个"display: none;"的样式；
  • v-if=true || false // 当值为 true 时，创建DOM元素，当值为 false 时，销毁DOM元素；
  • v-for=" " // 对数组进行循环遍历
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航