初探vue
前言
vue官方文档：https://cn.vuejs.org/v2/guide/instance.html
挂载点、实例、模板、插值表达式
<body>
<!-- id为root是为vue实例的挂载点 -->
<div id="root">
<!-- 插值表达式 -->
<h1>{{msg}}</h1>
</div>
<!-- vue实例不会处理下面的内容 -->
<div id="root2">
<h1>{{msg}}</h1>
</div>
<script>
// vue实例
new Vue({
//设置挂载点
el:'#root',
data:{
msg:"hello world"
}
})
</script>
</body>
vue实例只会处理当前挂载点下面的内容，在未指定模板内容的实例里，默认为挂载点里面的所有内容，以上内容也可以设置在实例中设置模板。
<body>
<!-- id为root是为vue实例的挂载点 -->
<div id="root">
</div>
<script>
// vue实例
new Vue({
//设置挂载点
el:'#root',
//实例设置模板
template:' <h1>{{msg}}</h1>',
data:{
msg:"hello world"
}
})
</script>
</body>
常用指令
v-text="msg" ：在标签里的内容。
v-html="msg" ：在标签的显示内容，相比于v-text可以支持html语言的内容显示。
v-on:click="handleClick" ：设置点击事件，可以简写为 @click="handleClick" 。
<body> <!-- id为root是为vue实例的挂载点 --> <div id="root"> <!-- 插值表达式 --> <h1 @click="handleClick">111</h1> </div> <script> // vue实例 new Vue({ //设置挂载点 el:'#root', methods: { handleClick:function(){ alert("111") } } }) </script> </body>
v-bind: ：单向属性绑定，vue实例里的数据可以决定页面的显示，但页面无法修改vue实例里面绑定的数据，可以简写为 :
<body> <!-- id为root是为vue实例的挂载点 --> <div id="root"> <!-- 插值表达式 --> <h1 v-bind:title="title">111</h1> </div> <script> // vue实例 new Vue({ //设置挂载点 el:'#root', data:{ title:'静置显示' }, methods: { handleClick:function(){ alert("111") } } }) </script> </body>
v-model="inputValue" ：双向绑定属性，vue实例的数据与页面的显示可以相互作用
<body> <!-- id为root是为vue实例的挂载点 --> <div id="root"> <input v-model="content" /> <div>{{content}}</div> </div> <script> // vue实例 new Vue({ //设置挂载点 el:'#root', data:{ content:'数据显示' } }) </script> </body>
v-show:"show" ：如果值为false，就会隐藏当前标签，即设置display
v-if:"show" ：如果值为false，就不显示当前标签
v-for="item of list" ：for循环遍历属性
<body> <div id="root"> <ul> <li v-for="item of list">{{item}}</li> </ul> </div> <script> // vue实例 new Vue({ //设置挂载点 el:'#root', data:{ list:[1,2,3] } }) </script> </body>
计算属性、侦听器
<body>
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
<div>{{Name}}</div>
</div>
<script>
// vue实例
new Vue({
//设置挂载点
el:'#root',
data:{
firstName:'',
lastName:''
},
computed:{
Name: function(){
return this.firstName + ' '+this.lastName
}
}
})
</script>
</body>
计算属性定义在computed中，Name是一个计算属性，数据通过计算后返回，显示在页面。
<body>
<div id="root">
姓：<input v-model="firstName" />
<div>{{count}}</div>
</div>
<script>
// vue实例
new Vue({
//设置挂载点
el:'#root',
data:{
firstName:'',
count:0
},
watch:{
firstName:function(){
return this.count ++
}
}
})
</script>
</body>
侦听器监控某个属性发生变化，并进行相应的处理。
todolist简单实现
<body> <div id="root"> <input v-model="inputValue"/> <button @click="handleSubmit">提交</button> <ul> <todo-item v-for="(item, index) of list" :key="index" :content="item" :index="index" @delete="handleDelete" ></todo-item> </ul> </div> <script> Vue.component('todo-item',{ props:['content'], template:'<li @click="handleClick">{{content}}</li>', methods:{ handleClick:function(){ this.$emit('delete',this.index) } } }) new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ handleSubmit:function(){ this.list.push(this.inputValue) this.inputValue = '' }, handleDelete:function(index){ alert(index) } } }) </script> </body>
