vue绑定事件 v-on 或者@
splice(index,x):vue中删除数组元素的方法,index表示从那边开始删,x表示删除几个元素。
<div id="app">
<li v-for="(item,index) in student">{{index+1}}-{{item}}----<button @click="del(index)">删除</button><button v-on:click="del(index)">删除</button></li>
</div>
<script src="js/vue.js"></script>
<script>
//绑定事件 v-on :事件名 或者 @事件名
new Vue({
el : "#app",
data() {
return {
student : ["张三","李四","王五","赵六"]
}
},
methods : {
del(index){
//console.log(index)
this.student.splice(index,1)
}
}
})
</script>
过滤器:用于进行文本内容格式化处理。
reverse():把字符串中的字符都颠倒过来。
toFixed():四舍五入取指定位数的小数点。
<div id="app">
{{name}}--{{name | formatName}}<br>
{{price}}--{{price | formatPrice}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el :"#app",
data(){
return{
name:"周杰伦",
price:13.546
}
},
filters:{
formatName(obj){
return obj.split("").reverse().join("");
},
formatPrice(obj){
return parseFloat(obj).toFixed(2);
}
}
})
</script>
数据监听watch计算属性computed
监听:简单点来说就是当某一块内容发生改变时你想做什么。
监听分为两种:
普通监听:只能监听简单的数据类型。
深度监听:可以监听简单数据类型和对象类型。
watch监听单个。
<div id="app">
<input type="text" v-model="content"/>
<input type="text" v-model="star.name"/>
<input type="text" v-model="star.age"/>
<input type="text" v-model="star.address"/>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
content:"",
star:{name:"张学友",age:"50",address:"南京"}
}
},
watch:{
content(newval,oldval){
if(newval=='周杰伦'){
alert("111");
}
},
star:{
handler(newval,oldval){
if(newval.name=="蔡徐坤"){
this.star.age=23;
this.star.address="上海";
}
},
deep:true
}
}
})
</script>
computed监听多个。
计算属性:不需要定义一个变量来统计结果。
<div id="app">
<input type="text" v-model="num1"/>+
<input type="text" v-model="num2"/>*
<input type="text" v-model="num3"/>={{result}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
num1:"",
num2:"",
num3:""
}
},
computed:{
result(){
return Number(this.num1)+Number(this.num2)*Number(this.num3);
}
}
})
</script>
组件化开发
创建组件第一种方式:全局引用
头部组件header.js。
//全局声明组件
export var myheader ={
template:`
<div>
<h2>管理系统</h2>
<div>{{name}}</div>
</div>
`,
data(){
return {
name :"张三"
}
}
}
尾部组件:footer.js。
//全局声明组件
export var myfooter ={
template:`
<div>
createby 堃哥
</div>
`
}
开发文件:index.html
<div id="app">
<my-header></my-header>
<my-footer></my-footer>
</div>
<script src="js/vue.js"></script>
<script type="module">
import { myheader as myheader } from './js/header.js';
import { myfooter as myfooter } from './js/footer.js';
//全局创建
Vue.component("my-header",myheader);
Vue.component("my-footer",myfooter);
new Vue({
el:"#app"
})
</script>
组件名不推荐使用驼峰命名,推荐使用匈牙利命名,而且运行时如果通过d盘的文件运行则会出现文件编译错误的问题,这时因为组件的js文件是自己编写的而不是导入的,所以需要使用live server插件通过ip地址来运行。
创建组件第二种方式:局部引用。
<div id="app">
<Myheader></Myheader>
<myfooter></myfooter>
</div>
<script src="js/vue.js"></script>
<script type="module">
import { myheader as myheader } from './js/header.js';
import { myfooter as myfooter } from './js/footer.js';
//局部创建
new Vue({
el:"#app",
components: {
"Myheader":myheader,
"myfooter":myfooter
}
})
</script>