【翠花学Vue】每日打卡——Vue打卡2

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>