vue基础

最新推荐文章于 2023-05-17 19:46:30 发布

帆崽12138

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量70

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_50613860/article/details/114989348

版权

vue

vue得DOM节点连接

固定语法

//创建一个vue实例
let app = new Vue({
            el: '#app',//指定当前实例的挂载点
            data: {
                msg: []
            },
          }）

vue绑定事件

//为文本框绑定事件，事件名称：keyup,事件处理函数：changeMsg
<input v-on:keyup="changeMsg">
 data: {
                msg: []
            },
     methods:{
         changeMsg:function(){
             this.msg=''
         }
     }

vue指令

v-model
v-on 事件绑定，他的事件修饰符有.stop:阻止事件冒泡，.prevent：阻止事件的默认行为，他是加在事件之后
v-for=“item in msg”，循环数组，item是自定义的变量，msg是要循环的变量，
v-html=“变量”可以对文字进行渲染，他和标签写在一起，不写在标签中间，不加{{}}
v-bind：id=“变量”，若属性值前每家v-bind，属性只能是静态值，加上后则是变量
v-if =“变量” 变量为true显示，为f则不显示，会删除不频繁的切换使用if
v-else 可以和v-if配合运用
v-else-if=“type===a” 则显示a 可以和前两个搭配使用
v-show show和if的区别在于show是对样式进行改变为none，若要频繁切换则使用show为好

内容绑定就是将{{变量}}写在标签中间，但这样的绑定只能显示纯文本

在methods中定义方法

methods:{
                greet:function(){
                    console.log('greet')
                }
            }

vue属性

methods：用户自定义方法

computed：计算属性，内部一定要使用return返回一个值，他的属性叫计算属性，值事要给匿名函数

计算属性监听新值

 <div id="app">
        <input type="text" v-model="age">
        <span>{{ageInfo}}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                age:''
            },
            //计算属性
            computed:{
                ageInfo:function(){
                    if(this.age>=12){
                        return '能进监狱了'
                    }else{
                        return '不能进监狱'
                    }
                }
            }
        })
    </script>

watch:监听器，他有两个属性值，oldvlue，newvlue，一个是旧值，一个是新值

监听器监听属性

<div id="app">
        <input type="text" v-model='age'>
        <span>{{message}}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                age:'',
                message:''
            },
            methods:{},
            computed:{},
            //监听后期
            watch:{
                age:function(newValue,oldValue){
                    if(newValue>=12){
                        this.message='可以进监狱了'
                    }else{
                        this.message='还不到年龄'
                    }
                    
                }
            }
        })
    </script>

格式化日期

方法格式化

  <div id="app">
        <table>
            <thead>
                <tr>
                    <th>标题</th>
                    <th>编号</th>
                    <th>日期</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in blogList">
                    <td>{{item.id}}</td>
                    <td>{{item.title}}</td>
                    <td>{{formatTime(item.create_time)}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                numbers:'1478956',
                blogList:[
                    {id:1,title:'hh',create_time:1614678059},
                    {id:2,title:'小说还没看完',create_time:1614678059},
                    {id:3,title:'谢谢谢谢',create_time:1614678059}
                ] 
            },
            // 用户自定义方法
            methods:{
                formatTime:function(a){
                    return moment(a).format('YYYY-MM-DD HH:mm:ss')
                }
            },
        })
    </script>

模板格式化

  <div id="app">
        {{reversed}}
        <table>
            <thead>
                <tr>
                    <th>标题</th>
                    <th>编号</th>
                    <th>日期</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in blogListFormat">
                    <td>{{item.id}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.create_time}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                numbers:'1478956',
                blogList:[
                    {id:1,title:'hh',create_time:1614678059},
                    {id:2,title:'小说还没看完',create_time:1614678059},
                    {id:3,title:'谢谢谢谢',create_time:1614678059}
                ] 
            },
            // 用户自定义方法
            method:{

            },
            computed:{
                reversed:function(){
                    return this.numbers.split('').reverse().join('')
                },
                blogListFormat:function(){
                   this.blogList.forEach(item=>{
                      item.create_time=moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')
                   })
                  return this.blogList
                }
                
            }
        })
    </script>

axios

spa

单页面应用，点击其他东西页面不刷新就是单页面应用

props

在props中属于js所以他的名命可区分大小写，不支持-

在html中，则相反

$emit

可以向父组件发射一个事件

创建局部

直接let 组件名就可以创建一个局部组件

创建之后要先在跟组件中使用components进行注册

<div id="app">
        <list-Item></list-Item>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let listItem={
            template:`<h3>11</h3>`
        }
        let app = new Vue({
            el: '#app',
            data: {},
            components:{

				//名命格式要正确
                'listItem':listItem
            }
        })