小福利，带你快速入门vue框架（3）

最新推荐文章于 2022-10-23 10:49:52 发布

littlespider889

最新推荐文章于 2022-10-23 10:49:52 发布

阅读量152

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/littlespider889/article/details/108683880

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

大家好，我是天空之城，今天给大家带来小福利，带你快速入门vue框架（3）
v-mode双向绑定,计算属性和监听器

v-mode双向绑定

作用：在input标签里输入内容，会改变script下面message里面的内容；同样修改script下面message里面的内容，也会改变message的内容，叫双向绑定
定义一个button里面的click事件setmsg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
   
</head>
<body>
    <div id="app">
        <!-- v-model 双向绑定 -->
        <input type="text" v-model:value='message'>
        <p>{{ message }}</p>
        <button @click='setmsg'>修改message</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'LG'
            },
            methods: {
                setmsg: function(){
                    this.message = '大虎'
                }
            }
        })
    </script>
</body>
</html>

计算属性
示例，计算长方形的面积
value会控制input标签的显示，v-mode绑定value属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
   
</head>
<body>
    <!-- <div id="app">
        <span>长:</span>
        <input type="text" v-model:value='length'>
        <span>宽:</span>
        <input type="text" v-model:value='width'>
        <span>面积:</span>
        <input type="text" v-model:value='area'>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                length: 0,
                width: 0
            },
            computed: {
                area: function(){
                    return this.length * this.width
                }
                
            }
           
        })
    </script> -->

    <div id="app">
        <span>省:</span>
        <input type="text" v-model:value='province'>
        <span>市:</span>
        <input type="text" v-model:value='city'>
        <span>区:</span>
        <input type="text" v-model:value='district'>
        <span>详细地址:</span>
        <input type="text" v-model:value='address'>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                province: '',
                city: '',
                district: ''
            },
            computed: {
                address: {
                    get:function(){
                        let result = ''
                        if (this.province) {
                            result = this.province + '省'
                        }
                        if (this.city) {
                            result += this.city + '市' 
                        }
                        if (this.district) {
                            result += this.district + '区'
                        }
                        return result
                    },
                    set:function(value){
                        let result = value.split(/省|市|区/)
                        // console.log(result) 
                        if (result && result.length > 0) {
                            this.province = result[0]
                        }
                        if (result && result.length > 1) {
                            this.city = result[1]
                        }
                        if (result && result.length > 2) {
                            this.district = result[2]
                        }
                        
                    }
                }
                
            }
           
        })
    </script> 
</body>
</html>

注意：set方法不能单独出现

监听属性
监听某个属性值，一旦发生改变时，就采取相应的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
   
</head>
<body>
    <div id="app">
        <span>搜索:</span>
        <input type="text" v-model:value='keyword'>

        <p>搜索结果:</p>
        <p>{{ result }}</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                keyword: '',
                result: ''
            },
            watch: {
                keyword: function(newvalue, oldvalue){
                    // console.log(newvalue)
                    // console.log(oldvalue)
                    this.result = '加载中....'
                    // 定时器
                    setTimeout(()=>{
                        this.result = '搜索关键字:' + newvalue
                    }, 1000)
                    
                }
            }

           
        })
    </script> 
</body>
</html>

表单输入绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
   
</head>
<body>
    <div id="app">
       <input type="text" v-model:value.lazy='message'>
       <textarea name="" id="" cols="30" rows="10" v-model='message'></textarea>
        <br>
       <input type="checkbox" value="jr" v-model='checkname'>
       <span>jr</span>
       <input type="checkbox" value="lg" v-model='checkname'>
       <span>lg</span>
       <input type="checkbox" value="coder" v-model='checkname'>
       <span>coder</span>
       <br>
       
       <input type="radio" value="男" name="m" v-model='gender'>
       <span>男</span>
       <input type="radio" value="女" name="m" v-model='gender'>
       <span>女</span>
       <br>
       <select v-model='selected'>
           <option value="" disabled>请选择</option>
            <option value="A">A</option>
            <option value="B">B1</option>
            <option value="C">C1</option>
            <option value="D">D</option>
       </select>
    
       <input type="text" v-model.number='age'>
       <input type="text" v-model.lazy='msg'>
       
       {{ message }}
       <!-- {{ checkname }} -->
       {{ gender }}
       {{ selected }}
       {{ msg }}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: '',
                checkname: [],
                gender: '',
                selected: '',
                age: 0,
                msg: ''
            }
           
        })
    </script> 
</body>
</html>

组建的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
   
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <!-- <button-counter></button-counter>
        <button-counter></button-counter> -->
        <!-- <HelloWorld></HelloWorld> -->
        <!-- <hello-wo-rld></hello-wo-rld> -->

        <!-- 局部组件 -->
        <!-- <hello-world></hello-world> -->
        <!-- <hello-juran></hello-juran> -->
        <!-- <juran></juran> -->
    </div>

    <script>
        // 组件的名字
        // 在组件之间的使用的使用，使用驼峰就可以
        // 全局组件 
        Vue.component('button-counter', {
            template: `
            <div>
                <button @click="count+=1">{{ count }}</button> 
                <button @click="count-=1">-</button>
                <h3>hello</h3>
                <button @click="add">+</button>
                <HelloWoRld></HelloWoRld>
                
            </div>
            `,
            data: function(){
                return {
                    count: 0
                }
            },
            methods:{
                add:function(){
                    this.count += 1
                }
            }
        });
        
        // 组件名字采用驼峰的方式来命名
        Vue.component('HelloWoRld',{
            template: `
            <div>
                <p>{{ msg }}</p>
            </div>
            `,
            data: function(){
                return {
                    msg: 'hello world'
                }
            }
        })

        // 普通的组件命名方式
        // Vue.component('juran',{
        //     template: `
        //     <div>
        //         <p>{{ msg }}</p>
        //     </div>
        //     `,
        //     data: function(){
        //         return {
        //             msg: 'hello jr'
        //         }
        //     }
        // })

        // let HelloWorld = {
        //     data: function(){
        //         return {
        //             msg: 'hello world'
        //         }
        //     },
        //     template: '<div>{{ msg }}</div>'
        // }

        // let HelloJuran = {
        //     data: function(){
        //         return {
        //             msg: 'hello juran'
        //         }
        //     },
        //     template: '<div>{{ msg }}</div>'
        // }

        new Vue({
            el: '#app',
            data: {
              name: '居然'
            },
            // 局部组件
            // components:{
            //     'hello-world': HelloWorld,
            //     'hello-juran': HelloJuran
            // }
        })
    </script> 
</body>
</html>

<!-- 
组件的注意点：
    data是一个函数
    组件模板内容必须是单一根元素
    组件模板可以模板字符串
    组件的命名方式
        短横线
        驼峰
 -->

littlespider889

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小福利，带你快速入门vue框架（3）

大家好，我是天空之城，今天给大家带来小福利，带你快速入门vue框架（3）v-mode双向绑定,计算属性和监听器v-mode双向绑定作用：在input标签里输入内容，会改变script下面message里面的内容；同样修改script下面message里面的内容，也会改变message的内容，叫双向绑定定义一个button里面的click事件setmsg<!DOCTYPE html><html lang="en"><head> <meta cha
复制链接

扫一扫

专栏目录