Vue知识整理(一)

这篇博客,最后会使用到的知识展示,先看效果 *效果很丑,但是内容很宁
效果

完整代码如下:(后面会有具体细节讲解)
一、App.vue:

<template>
    <div id="app">
        <!--<img src="./assets/logo.png">
    <router-view/>-->

        <!--<test1 msg="新的属性值"></test1>-->
        <usershow></usershow>
    </div>
</template>

<script>
    import test1 from './components/test1'
    import usershow from './components/usershow'
    export default {
        name: 'app',
        components: {
            usershow
        }
    }

</script>

<style>
    #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

二、在src–>components–创建test1.vue

<template>
    <div id="test1">
        <div>{{message}}</div>
        <ul>
            <li v-for="item in items">{{item.title}}</li>
        </ul>


        <button v-on:click="greet('Hello12321')">getButton_Alert say :</button>

        <!--键盘事件-->
        <!--<input type="text" v-on:keyup="pressKey" v-on:keyup.alt.enter="enterHit"/>-->

        <hr />

        <!--computed 计算属性-->
        <label> First Name</label>
        <input type="text" v-model="user.firstName" />
        <br />
        <label> LastName</label>
        <input type="text" v-model="user.lastName" />


        <h4>{{fullName}}</h4>

        <h4>{{msg}}</h4>

    </div>
</template>

<script>
    export default {
        name: "test1",
        props:{
            msg:{
                type:String,
                default:"默认文字",
            }
        },
        data() {
            return {
                message:'123',
                items:[{title:"items 1"},
                {title:"items 2"},
                {title:"items 3"}
                ],
                showName:false,
                user:{

                    firstName:"Chenxh",
                    lastName:"Chenxh",

                },


            }
        },
        methods:{
            greet:function(args){
                alert(args);
            },
            enterHit:function(){
                console.log("enterHit");
            },

        },
        computed:{
            fullName:function(){
                return this.user.firstName+" "+this.user.lastName
            }
        }


    }

</script>

<style>

</style>

三、在src–>components–创建usershow.vue

<template>
    <div id="usershow">
        <h1>USER</h1>
        <form v-on:submit="addUser">
            <input type="text" v-model="newUser.name" placeholder="Enter name" /><br />
            <input type="text" v-model="newUser.email" placeholder="Enter email" /><br />
            <input type="submit" value="Submit" />
        </form>
        <ul>
            <!--展示用户信息-->
            <li v-for="user in users">
                {{user.name}}:{{user.email}}
            </li>

        </ul>

    </div>

</template>

<script>
    export default {
        name: "usershow",
        data() {
            return {
                newUser: {},
                users: [
                    {
                        name: "Chenxh1",
                        email: "Chenxh1@email.com",
                        contacted: false
                    },
                    {
                        name: "BruceXuheng",
                        email: "BruceXuheng@email.com",
                        contacted: false
                    },
                    {
                        name: "Chenxh3",
                        email: "Chenxh3@email.com",
                        contacted: false
                    },
                    {
                        name: "Chenxh4",
                        email: "Chenxh4@email.com",
                        contacted: false
                    }
                ]

            }
        },
        methods: {
            addUser: function(e) {
                this.users.push({
                    name: this.newUser.name,
                    email: this.newUser.email,
                    contacted: false
                });

                e.preventDefault();
            }

        }
    }
</script>

<style>

</style>

细节讲解:

只需要在初始的Vue项目中,修改这三个文件就可以实现图片中的效果,接下来一次记录、解释代码中的使用和含义。
1、xx.vue文件分为三模块:

<template>
</template>

<script>
</script>

<style scoped>
</style>

template:是视图层模块;
script:是逻辑实现模块;
style:是样式控制模块(css样式)。

script里内容较为特殊,尤为重要,写的模板格式是:

export default {
        name: "test",
        props:{
        //可以添加标签属性

        },
        data() {
            return {
            //返回templates里的数据
            },

        },
        methods: {
        //设置点击事件
            addUser: function(e) {
            }
        },
        computed:{
        }

    }

2、v-for的使用:
1】在template中使用需要有数据展示的标签
需要注意点有:*div的id,*v-for中的写法a in list;
2】在script中添加返回的数据
在data方法中返回数据,例如下面代码中users这种集合写法
*listName:[
{属性名:”content”,属性名:”content”},
{属性名:”content”,属性名:”content”}
],

<template>
    <div id="newflag">
        <ul>
            <li v-for="user in users">{{user.name}}</li>
        </ul>

    </div>

</template>

<script>
    export default {
        name: "newflag",
        data() {
            return {
                users: [
                {
                    name: "chenxh"
                }, 
                {
                    name: "chenxh"
                },
                ]
            }
        },

    }
</script>

<style>
</style>

3、v-on:click=”onClickLis(‘这里可以传参数’)”
主要注意点是methods的写法格式,点击事件的方法写法。

<template>
    <div id="newflag">
        <button v-on:click="onClickLis('这里可以传参数')">biubiubiu</button>
    </div>

</template>

<script>
    export default {
        name: "newflag",
        methods: {
            onClickLis: function(arg) {
                alert(arg);
            }
        }

    }
</script>

<style>

</style>

4、v-html解析html代码展示

<template>
    <div id="newflag">
        <h1 v-html="message"></h1>
    </div>

</template>

<script>
    export default {
        name: "newflag",
        data(){
            return{
            message: '<a href="http://blog.csdn.net/Mr_ChenXu?ref=toolbar">http://blog.csdn.net/Mr_ChenXu?ref=toolbar</a>',
            }

        },
    }
</script>

<style>

</style>

5、v-bind:class & v-bind:model
1】:v-bind:class=”{‘class2’: class1} 绑定class可以是集合,key就是class样式名,value就是设置使用boolean属性;
2】:v-model=”class1” 设置class为标签属性的值。

<template>
    <div id="newflag">
        <input type="checkbox" v-model="class1" id="r1">
        <br><br>
        <div v-bind:class="{'class2': class1}">
            改变
        </div>
    </div>

</template>

<script>
    export default {
        name: "newflag",
        data() {
            return {
                //          message: '<a href="http://blog.csdn.net/Mr_ChenXu?ref=toolbar">http://blog.csdn.net/Mr_ChenXu?ref=toolbar</a>',
                class1: false,
            }

        },
    }
</script>

<style>
    .class1 {
        background: #444;
        color: #eee;
    }
    .class2 {
        background: #42B983;
        color: #eee;
    }
</style>

6、对象及对象属性的使用:

<template>
    <div id="newflag">
        <label>姓名</label>
        <input type="text" v-model="user.myName" />
        <br />
        <label>性别</label>
        <input type="text" v-model="user.sex" />
    </div>

</template>

<script>
    export default {
        name: "newflag",
        data() {
            return {
                user:{
                    myName:'chenxuheng',
                    sex:'Man'
                },
            }

        },
    }
</script>

<style>

</style>

7、export defalut中的属性 props的作用


1】在使用标签添加属性,代码如下:

<newflag msg="覆盖默认"></newflag>

2】在newflag的.vue文件中:

<template>
    <div id="newflag">
        <h1>{{msg}}</h1>
    </div>

</template>

<script>
    export default {
        name: "newflag",
        props:{
            msg:{
                type:String,
                default:"默认文字",
            }
        },
    }
</script>

<style>

</style>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Mr_ChenXu/article/details/79075318
文章标签: Vue Vue.js
个人分类: Vue.js知识整理
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭