vue.js 入门

Posted chenjianwen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js 入门相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="vue.js"></script>
</head>

<!--
1.绑定事件函数: v-on:click="handleClick"   相当于  @click="handleClick"
2.绑定标签属性: v-bind:title="title"   相当于   :title="title"
3.双向绑定数据: v-model="content"   输入框的内容改变,对应的content数据也会改变
4.v-if="show"与 v-show="show":
    v-if="show": 直接显示或隐藏标签
    v-show="show": 在标签上添加或删除属性 style="display: none;"
    频繁显或隐藏,建议使用 v-show="show"
5.循环显示列表list的内容:v-for="(item,index) of list" :key="index"
    :key="index": 用于提高渲染性能,但index 不能相同
-->

<body>
    <div id="test1">
        <div :title="title" @click="handleClick">{{title}}</div>

        <input v-model="content"/>
        <div>{{content}}</div>

        姓:<input v-model="FirstName"/>
        名:<input v-model="LastName"/>
        <div>{{FullName}}</div>

        <div>计数:{{count}}</div>

        <div v-if="show">hellow word【点击隐藏显示】</div>
        <div v-show="show">hellow word【点击隐藏显示】</div>
        <button @click="showClick">toggle</button>

        <ul>
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>

        <input v-model="inputValue" />
        <button @click="todoList">提交</button>
        <ul>
            <li v-for="(item, index) of todolist" :key="index">{{item}}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: "#test1",
            data: {
                content: "嘿嘿",
                title: "This is hellow word",
                FirstName: "",
                LastName: "",
                count: 0,
                show: true,
                list: [1,2,3,4,5],
                inputValue: "",
                todolist: [],
            },
            methods: {      //函数定义属性
                handleClick: function () {
                    this.content = "哈哈"     //点击改变content数据
                },
                showClick: function () {
                    this.show = !this.show
                },
                todoList: function () {
                    this.todolist.push(this.inputValue),    //将获取到的值加入列表
                    this.inputValue = ""
                }
            },
            computed: {     //计算属性
                FullName: function () {
                    return this.FirstName +   + this.LastName
                }
            },
            watch: {    //侦听器
                FullName: function () {
                    this.count ++
                }
            }
        })
    </script>
</body>
</html>

 

以上是关于vue.js 入门的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 中的片段

Vue.js入门

Vue.js——组件快速入门(上篇)

第二节:简易安装 和 快速入门Vue.js

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

vue.js快速入门~组件入门~