-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js入门</title>
<script type="text/javascript" src="./vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
</head>
<body>
<div id="root">
<div v-if="show">hello</div>
<button @click="handelClick">toggle</button>
<ul>
<li v-for="item of list" :key="item">{{item}}</li>
<!-- 每一次循环key值不同,现在数组每个元素不同，所以可以用item
如果不对列表频繁的排序，下面的方法也可以
<li v-for="(item ，index) of list" :key="index">{{item}}</li>
-->
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
show:true,
list:["a","b","c"]
},
methods:{
handelClick:function(){
this.show=!this.show;
}
}
})
</script>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js入门</title>
<script type="text/javascript" src="./vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
</head>
<body>
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
firstName:"",
lastName:"",
count:0
},
//reslect
computed:{
fullName:function(){
return this.firstName+''+this.lastName
}
},
watch:{
// firstName:function () {
// this.count ++
// },
// lastName:function () {
// this.count ++
// }
fullName:function () {
this.count ++
}
}
})
</script>
</body>
</html>
计算computed
侦听watch
查看全部 -
属性绑定 v-bind:简写:
双向绑定 v-model
（win10自带的浏览器有时显示的效果和谷歌不太一样重新打开一次就好了）
查看全部 -
挂载点，模板，标签里面展示的{{}}为挂载点，下面script标签里面的是模板
查看全部 -
v-if DOM对象会被移除
v-show 会添加display:none的样式
查看全部 -
v-on: 简写@
v-bind:简写:
查看全部 -
组件中的data应该是一个函数，而不是new Vue中的对象
查看全部 -
template模板下只能有一个子节点，否则会报错
查看全部 -
修改入口文件的名称
查看全部 -
3-4实现删除功能，讲解的很清晰，关于父级传给子级和子级传给父级
查看全部 -
VUE学习指导查看全部
-
api里面规定v-model就代表数据双向绑定，v-model:value这种写法不存在，完全是自己臆想出来的，：属性，这种写法只有v-bind:属性
查看全部 -
任何一个vue项目都是由千千万万的vue实例组成的
查看全部 -
每一个组件都是vue的实例
查看全部 -
1.方法用不用加括号，调用的时候查看全部
举报