zoukankan html css js c++ java

vue整理

前端 => 页面

html: 页面架构
css：样式布局
js：操作数据，页面行为(前后端交互)
jq：js的封装，及其方便的完成页面特效

vue：js的框架
1.数据驱动
2.数据的双向绑定
3.虚拟DOM

1 认识vue

2 引入vue

3 vue实例

4 实例生命周期钩子

5 视图常规操作

6 条件渲染

7 列表渲染

8 重要指令 v-bind v-on v-model

9 案列 todolist

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue导入</title>
    
</head>
<body>
    <div id="app">
        <p title="普通p">p标签</p>
        <!-- v-bind vue的指令，可以被vue解析并处理 -->
        <!-- 第一个title：html标签的属性名(系统预定义的) -->
        <!-- 第二个titile：vue的变量 -->
        <p v-bind:title='title'>p标签</p>
    </div>
</body>
<!-- 引入外部vue js -->
<script type="text/javascript" src="./js/vue.js"></script>
<!-- 自身 js -->
<script type="text/javascript">
    // 创建vue实例，需要一个对象参数
    new Vue({
        el: '#app',
        data: {
            title: 'vue p'
        }
    })
</script>
</html>

vue导入.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue实例之el</title>
</head>
<body>
    <div id="root"></div>
    <!-- <p v-bind:class="title" v-on:dblclick='action' v-model='abc' v-for="it in its"></p> -->
    <p v-bind:title='title'>p标签</p>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    // el: vue实例的挂载目标
    // 表示vue创建的该实例只对挂载点内部的模块进行处理
    new Vue({
        el: '#root',
        data: {
            title: 'vue p'
        }
    })
</script>
</html>

vue实例之el.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue data</title>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <!-- 出现在模块中的变量，一般都需要默认初始值 -->
        <p v-text='txt'></p>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        // data为模块中的变量提供数据
        data: {
            msg: 'vue 控制的 文本1',
            txt: 'vue 控制的 文本2',
        }
    });
    console.log(app)
    // el | data 为 vue变量 => 以$开头，区别普通变量
    console.log(app.$data)
    console.log(app.$data.msg)
    // 所有在模块中产生的变量，也可以通过vue的实例直接访问
    console.log(app.msg)

</script>
</html>

vue实例之data.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue data</title>
    <style type="text/css">
        .p1 {
            width: 300px;
            height: 100px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-on指令用于绑定事件 -->
        <!-- 事件对应逻辑由vue实例的methods处理 -->
        <!-- 绑定的事件(函数)需不需要携带参数列表： 无=>无需传参 有=>需要传参 -->
        <!-- 需要操作事件(需要事件对象)无需传参，传参后会都是事件 -->
        <p class="p1" v-on:click='func'>{{ msg }}</p>
        <p class="p1" v-on:click='fn("zero", 88888)'>{{ msg }}</p>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'vue context'
        },
        methods: {
            func: function (obj) {
                // alert('呵呵')
                // this: vue实例 => app
                // alert(this.msg)
                console.log(obj)
            },
            fn: function (name, salary) {
                console.log(name)
                console.log(salary)
            }
        }
    });
</script>
</html>

vue实例之methods.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
    <div id="app">
        <div>
            姓：<input type="text" v-model='first_name' />
        </div>
        <div>
            名：<input type="text" v-model='last_name' />
        </div>
        <!-- <p>姓名：{{ full_name() }}</p> -->
        <!-- 采用计算方式的变量可以不在data中赋初值 -->
        <p>姓名：{{ full_name }}</p>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            first_name: '',
            last_name: ''
        },
        // methods: {
        //     full_name: function () {
        //         return this.first_name + " " + this.last_name;
        //     }
        // },
        // 一个变量依赖于多个变量，一般对该变量采用计算处理
        computed: {
            full_name: function () {
                return this.first_name + " " + this.last_name;
            }
        }
    })
</script>

</html>

vue实例之computed.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
    <div id="app">
        <div>
            姓名：<input type="text" v-model='full_name' placeholder="姓与名以空格隔开" />
        </div>
        <p>姓：{{ first_name }}</p>
        <p>名：{{ last_name }}</p>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '',
            last_name: ''
        },
        watch: {
            full_name: function () {
                // 监听full_name，然后拆分为姓与名
                var fname = this.full_name;
                var arr = fname.split(' ');
                this.first_name = arr[0];
                this.last_name = arr[1];
            }
        }
    })
</script>

</html>

vue实例之watch.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>delimiters</title>
</head>
<body>
    <div id="app">
        {{ msg }} [[ msg ]] ${ msg }
    </div> 
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据'
        },
        // delimiters配置自定义绑定符号
        // 值为拥有两个元素的数组，元素为字符串形式
        delimiters: ['${', '}']
    })
</script>

</html>

vue实例之delimiters.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子</title>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div> 
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据'
        },
        // 该钩子方法触发：vue实例刚被创建(只拥有内存位置),其他任何操作都未执行
        // 就满足的beforeCreate钩子的触发条件，系统就会回调该方法的实现
        // 用户在该触发条件情况下想去完成某些逻辑，那么就去实现该钩子
        beforeCreate: function () {
            
        },
        /*
        // 系统内部调用
        if (beforeCreate) {
            beforeCreate()
        }
        // ...
        // ...
        if (created) {
            created()
        }
        if (beforeMount) {
            beforeMount()
        }
        // ...
        */

        // 数据与事件加载完毕，el并没有进行挂载
        created: function () {
            // 获取想要的数据(请求后台)
            // 事件的解绑或换绑或重新绑定
            // 对虚拟DOM进行修改
        },
        // DOM树加载完毕，el渲染完毕
        mounted:function () {
            // 可能需要对DOM进行操作(交给模块处理)
        }
    })
</script>

</html>

生命周期钩子.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视图</title>
    <style type="text/css">
        p {
            border: 1px solid #ff6700;
            height: 30px;
            line-height: 30px;
        }
        .abc {
            border-color: yellowgreen;
        }
        [class] {
            border-width: 5px;
        }

        [v-cloak] {
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <!-- <div id="app" v-cloak> -->
    <div id="app">
        <!-- v-model实现数据的双向绑定 -->
        <input type="text" v-model='msg'>
        <input type="text" v-model='msg'>
        <p>{{ msg }}</p>
        <p v-text='msg'></p>
        <!-- 只赋值一次 -->
        <p v-once>{{ msg }}</p>
        <!-- 可以解析html语法的标签 -->
        <p v-html='msg'></p>

        <!-- 属性的绑定：属性值有变量控制 v-bind:属性名 :属性名 -->
        <!-- <p class="active"></p> -->
        <!-- <p v-bind:class='active'></p> -->
        <p :class='active'></p>

        <!-- 事件的绑定：事件值为函数名(带或不带参数列表) v-on:事件名 @事件名 -->
        <p @dblclick='func'></p>

    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            msg: '初值',
            active: 'abc'
        },
        methods: {
            func: function () {
                alert('呵呵')
            }
        }
    })
</script>
</html>

vue视图相关操作.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主要指令v-bind</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style type="text/css">
        .a {
            background-color: red;
        }
        .b {
            color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind:绑定系统预定义属性 -->
        <!-- 字符串abc -->
        <p title="abc">p段落</p>
        <!-- 1、变量abc，需要初始化 -->
        <p v-bind:title="abc">p段落</p>
        <!-- 2、如何直接将abc作为字符串绑定到属性 -->
        <p v-bind:title="'abc'">p段落</p>
        <!-- 3、v-bind简写为: -->
        <p :title="'ABC'">p段落</p>

        <!-- 4、绑定多个变量 -->

        <!-- i：以数组形式进行赋值 -->
        <!-- a, b为两个变量 -->
        <!-- 变量值可以有data提供 -->
        <!-- <div :class="[a, b]">12345</div> -->
    
        <!-- ii：以对象形式进行赋值 -->
        <!-- a，b为两个class值 -->
        <!-- class值只取true | false -->
        <!-- 非空均视为true，否则视为false -->
        <!-- <div :class="{a: 'A', b: 'B'}">67890</div> -->
        <!-- <div :class="{a: true, b: true}">67890</div> -->

        <!-- iii -->
        <div :class="[{a: true}, {b: true}]">呵呵嘻嘻哈哈</div>

        <!-- 总结 -->
        <!-- [], 中出现的值，作为变量，变量值来源于data，且最终将来源于data的数据作为属性值赋值给v-bind绑定的属性 -->
        <!-- {}, 中出现的键(key)，直接作为v-bind绑定的属性的值，而键(key)对应的值(value)是决定键是否起效，值(value)的取值只为true|false -->

        <a :style="color" href="">百度</a>
        <a :style="{color: 'red', backgroundColor: 'black'}" href="">京东</a>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            abc: 'ABC',
            a: 'a',
            b: 'b',
            // color: 'color: red'
            color: {
                color: 'red',
                // 支持驼峰命名法
                backgroundColor: 'orange'
            }
        }
    })
</script>
</html>

v-bind.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主要指令v-on</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div id="app">
        <!-- 1、绑定系统预定义事件，事件值为函数 -->
        <div v-on:click="fn1">{{ msg }}</div>
        <!-- 2、v-on简写 -->
        <div @click="fn2">{{ msg }}</div>
        <!-- 3、传值 -- 默认传值 -- 事件 event -->
        <div @click='fn3'>{{ msg }}</div>
        <!-- 4、传值 -- 自定义值 -->
        <div @click="fn4(msg, 88888)">{{ msg }}</div>
        <!-- 5、传参 -- 自定义值 + 事件 -->
        <div @click="fn5($event, msg)">{{ msg }}</div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: '默认值'
        },
        methods: {
            fn1: function () {
                alert('呵呵')
            },
            fn2 () {
                alert('嘻嘻')
            },
            fn3 (obj) {
                console.log(obj)
            },
            fn4 (obj, num) {
                console.log(obj, num)
                console.log(this.msg)
            },
            fn5 (ev, msg) {
                console.log(ev, msg)
            }
        }
    })
</script>
</html>

v-on.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主要指令v-model</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div id="app">
        <!-- v-model针对于表单元素 -->

        <form action="" method="get">
            <!-- 1、双向绑定：服务于文本输入框 -->
            <!-- v-model存储的值为输入框的value值 -->
            <div>
                <input type="text" name="usr" v-model="in_val">
                <input type="password" name="ps" v-model="in_val" >
                <textarea name="info" v-model="in_val"></textarea>
            </div>
            
            <!-- 2、单选框 -->
            <div>
                <!-- 单选框是以name进行分组，同组中只能发生单选 -->
                <!-- v-model存储的值为单选框的value值 -->
                男：<input type="radio" name="sex" value="男" v-model="ra_val">
                女：<input type="radio" name="sex" value="女" v-model="ra_val">
                {{ ra_val }}
            </div>

            <!-- 3、单一复选框 -->
            <!-- v-model存储的值为true|false -->
            <!-- 或者为自定义替换的值 -->
            <div>
                <input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
                {{ sin_val }}
            </div>
            
            <!-- 4、多复选框 -->
            <!-- v-model存储的值为存储值多复选框value的数组 -->
            <div>
                <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
                <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
                <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
                {{ more_val }}
            </div>

            <input type="submit">
        </form>

    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            in_val: '',
            // 默认值可以决定单选框默认选项
            ra_val: '男',
            // 默认值为true，单一复选框为选中，反之false为不选中
            sin_val: '',
            // 数组中存在的值对应的复选框默认为选中状态
            more_val: ['喜好女的','不挑']
        }
    })
</script>
</html>

v-model.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius: 50%;
        }
        .bb {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            border-radius: 50%;
            font: 400 20px/50px 'STSong';
            text-align: center;
            user-select: none;
            float: left;
            margin-left: 20px;
        }
        .wrap:after {
            content: '';
            display: block;
            clear: both;
        }
        .a {
            width: 300px;
            height: 200px;
        }
        .r {background: red}
        .g {background: green}
        .b {background: blue}
    </style>
</head>
<body>
    <div id="app">
        <button @click="btnClick">切换</button>
        <!-- 1、v-if取值为true|false -->
        <!-- true将会被渲染|false不会被渲染(页面中不存在该标签) -->
        <!-- <div class="box" v-if="isShow"></div> -->

        <!-- 2、v-show取值为true|false -->
        <!-- true为渲染并显示，false虽然渲染到DOM上，但display以none形式存在 -->
        <div class="box" v-show='false'></div>
        
        <!-- 3、v-if、v-else-if、v-else -->
        <!-- 多分支条件 -->
        <div class="wrap">
            <!-- .bb.b$*3 -->
            <div class="bb b1" @click='changeColor(0)'>红</div>
            <div class="bb b2" @click='changeColor(1)'>绿</div>
            <div class="bb b3" @click='changeColor(2)'>蓝</div>
        </div>
        <div>
            <!-- 多分支一定存在判断，判断便会产生比较变量 -->
            <div class="r a" v-if='tag == 0'></div>
            <div class="g a" v-else-if='tag == 1'></div>
            <div class="b a" v-else></div>
        </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            isShow: false,
            tag: 0
        },
        methods: {
            // 通过方法控制绑定给v-if的值
            btnClick: function () {
                this.isShow = !this.isShow;
            },
            changeColor (num) {
                this.tag = num;
            }
        }
    })
</script>
</html>

条件渲染.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li>{{list[0]}}</li>
            <li>{{list[1]}}</li>
            <li>{{list[2]}}</li>
            <li>{{list[3]}}</li>
            <li>{{list[4]}}</li>
            <li>{{list[5]}}</li>
            <li>{{list[6]}}</li>
        </ul>
        <!-- 迭代数组 -->
        <ul>
            <!-- 变量it为集合list中被迭代出的元素 -->
            <!-- 由v-for指令控制的标签会随元素的个数动态渲染 -->
            <li v-for='it in list'>{{ it }}</li>
        </ul>

        <!-- 迭代对象 -->
        <div v-for='value in dic'>{{ value }}</div>

        <!-- 迭代除取值外的其他可迭代到的值 -->
        <ul>
            <li v-for="(v, i) in list">索引：{{i}} 名字：{{v}}</li>
        </ul>

        <ul>
            <li v-for="(v, k, i) in dic">{{i}} {{k}} {{v}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            list: ["张三", "李四", "王五", "赵六", "钱七", "egon", "monkey"],
            dic: {'name': 'zero', 'age': 8, 'salary': 88888}
        }
    })
</script>
</html>

列表渲染.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <!-- key属性：可以提高效率（通过不同的唯一key值建立缓存） -->
    <div id="app">
        <div v-for='(item,index) in list' :key='index' style="height: 30px">
            <div v-for='(value, key, index) in item' :key='index + 10' style="float: left;">
                {{key}} : {{value}}
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            list: [
                {'name': 'egon', 'age': 108},
                {'name': 'monkey', 'age': 77},
                {'name': 'zero', 'age': 8}
            ]
        }
    })
    // items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]
    // 通过[索引]取出数组中对应的值
    // 通过.key取出对象中对应的值
</script>
</html>

复杂数据的列表迭代.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <!-- 录入用户输入的数据，更新到指定的list中，通过vue的数据驱动特效，实时渲染到页面 -->
    <div id="app">
        <div>
            <input type="text" v-model='value'>
            <!-- 提交：将数据添加到list中 -->
            <button @click='pushAction'>提交</button>
        </div>    
        <ul>
            <!-- 点击指定的li，将自身数据从list中移除，完成自身删除 -->
            <li @click='deleteAction(index)' v-for='(item,index) in list' :key="index">{{ item }}</li>
        </ul>

    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        // vue目前不支持索引直接操作数据，但可以通过数据类型对应的操作方法
        data: {
            value: '',
            list: []
        },
        methods: {
            pushAction () {
                this.list.push(this.value);
                this.value = ''
            },
            deleteAction (index) {
                // alert(index)
                this.list.splice(index, 1)
            }
        }
    })
</script>
</html>

todolist.html

一：认识vue

定义：一个构建数据驱动的 web 界面的渐进式框架

优点：

1、可以完全通过客户端浏览器渲染页面，服务器端只提供数据

2、方便构建单页面应用程序（SPA）

四：实例生命周期钩子

定义：

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

钩子方法：

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。

beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。

updated：数据更新时调用，发生在虚拟 DOM 打补丁之前。

activated：keep-alive 组件激活时调用。

deactivated：keep-alive 组件停用时调用。

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

重点钩子：

created：实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据，重新渲染最新数据)

mounted：虚拟DOM构建完毕，并完成实例的el挂载。可以重新操作页面DOM

6 条件渲染 v-if v-show

v-if：值true会被渲染，值false不会被渲染

<div id="app">
    <div v-if='isShow'>div div div</div>
    <button @click='isShow = !isShow'>改变</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: true
        }
    })
</script>

v-else：与v-if结合使用形成对立面

<div id="app">
    <div v-if='isShow'>div div div</div>
    <div v-else='isShow'>DIV DIV DIV</div>
    <button @click='isShow = !isShow'>改变</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: true
        }
    })
</script>

v-else-if：变量的多情况值判断

<div id="app">
    <div v-if='tag == 0'>if if if</div>
    <div v-else-if='tag == 1'>else if else</div>
    <div v-else='tag == 2'>else else else</div>
    <input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            tag: 0
        }
    })
</script>

template：不被渲染的vue结构标签

<template v-if="isShow">
    <p>用template嵌套</p>
    <p>可以为多行文本</p>
    <p>同时显隐</p>
    <p>且template标签不会被vue渲染到页面</p>
</template>

v-show：一定会被渲染到页面，以display属性控制显隐

key：为v-if方式的显隐创建缓存，提高效率

<div id="app">
    <div v-if='tag == 0' key='0'>if if if</div>
    <div v-else-if='tag == 1' key='1'>else if else</div>
    <div v-else='tag == 2' key='2'>else else else</div>
    <input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            tag: 0
        }
    })
</script>

7 列表渲染 v-for

v-for：循环渲染列表

<div id="app">
    <ul>
        <li v-for='item in items'>{{ item }}</li>
    </ul>
    <button @click='click'>改变</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            items: ['张三', '李四', '王五']
        }，
        methods: {
            click: function () {
                this.items.splice(1, 1, '李大大');
                this.items.pop();
                this.items.push('赵六')
            }
        }
    })
</script>

遍历数组

// items: ['张三', '李四', '王五']

// 值
<ul>
    <li v-for='item in items'>{{ item }}</li>
</ul>
// 值, 索引
<ul>
    <li v-for='(item, index) in items'>{{ index }} - {{ item }}</li>
</ul>

遍历对象

// {'name': '张三', 'age': 18, 'sex': '男'}

// 值
<div v-for="value in object">
  {{ value }}
</div>
// 值, 键
<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>
// 值, 键, 索引
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

复杂数据渲染

// items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]
<div>
    <div>{{ items[0].name }}</div>
    <div>{{ items[1].age }}</div>
    <div>{{ items[2].sex }}</div>
</div>

8 重要指令 v-bind v-on v-model

v-bind

<!-- 值a -->
<div v-bind:class='"a"'></div>

<!-- 变量a -->
<div v-bind:class='a'></div>

<!-- 变量a, b -->
<div v-bind:class='[a, b]'></div>

<!-- a为class值，isA决定a是否存在(ture | false) -->
<div v-bind:class='{a: isA}'></div>

<!-- 多class值，是否存在 -->
<div v-bind:class='{a: isA, b: isB}'></div>

<!-- 多style值，my_color为变量，cyan为普通值 -->
<div :style='{color:my_color, background:"cyan"}'></div>

v-on

<!-- 绑定函数fn1，并将事件event传递过去 -->
<div v-on:click='fn1'></div>

<!-- 绑定函数fn2，并将自定义参数10传递过去 -->
<div v-on:click='fn2(10)'></div>

<!-- 绑定函数fn3，并将事件event与自定义参数10传递过去 -->
<div v-on:click='fn2($event, 10)'></div>

v-model

<!-- 文本输入框：数据的双向绑定 -->
<input type="text" v-model='val' />
<textarea v-model='val'></textarea>

<!-- 单个复选框：选中与否val默认值为true|false -->
<input type="checkbox" v-model='val' />
<!-- 通过true-value|false-value修改默认值为true|false -->
<input type="checkbox" v-model='val' true-value="选中" false-value="未选中" />

<!-- 多个复选框：val作为数组[]来使用，可以存储选中元素的value值，反之数组有对应value代表该选框选中 -->
<input type="checkbox" value="男" v-model='val' />
<input type="checkbox" value="女" v-model='val' />

<!-- 单选框：val存储选中的单选框的value值 -->
<input type="radio" value="男" v-model='val' />
<input type="radio" value="女" v-model='val' />

9 案列

v-show

<style type="text/css">
    .btn_wrap {
        width: 660px;
        margin: 0 auto;
    }
    .btn_wrap:after {
        content: '';
        display: block;
        clear: both;
    }
    .btn {
        width: 200px;
        height: 40px;
        border-radius: 5px;
        float: left;
        margin: 0 10px 0;
    }
    .box {
        width: 660px;
        height: 300px;
    }
    .b1 {background-color: red}
    .b2 {background-color: orange}
    .b3 {background-color: cyan}

    .box_wrap {
        width: 660px;
        margin: 10px auto;
    }
</style>

<div id="app">
    <div class="btn_wrap">
        <div class="btn b1" @click='setTag(0)'></div>
        <div class="btn b2" @click='setTag(1)'></div>
        <div class="btn b3" @click='setTag(2)'></div>
    </div>
    <div class="box_wrap">
        <div class="box b1" v-show='isShow(0)'></div>
        <div class="box b2" v-show='isShow(1)'></div>
        <div class="box b3" v-show='isShow(2)'></div>
    </div>
</div>


<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            tag: 0
        },
        methods: {
            isShow (index) {
                return this.tag === index;
            },
            setTag (index) {
                this.tag = index;
            }
        }
    })
</script>

v-for

<div id="app">
    <div>
        <input type="text" v-model="inValue">
        <button @click='pushAction'>提交</button>
    </div>
    <ul>
        <li @click='deleteAction(index)' v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
</div>


<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            inValue: '',
            list: []
        },
        methods: {
            pushAction: function () {
                this.list.push(this.inValue);
                this.inValue = ''
            },
            deleteAction: function (index) {
                this.list.splice(index, 1);
            }
        }
    })
</script>

一组件介绍

二局部组件

三全局组件

四父组件传递数据给子组件

五子组件传递数据给父组件

六父子组件实现todolist

七搭建vue开发环境

　　1 安装nodejs

　　2 安装脚手架

　　3 项目创建

　　4 vue基础模板

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 错的 -->
        <!-- <localTag></localTag> -->

        <!-- ① -->
        <!-- <localtag></localtag> -->
        
        <!-- ② ③ ④ ⑤ -->
        <local-tag></local-tag>
        <local-tag></local-tag>

        <!-- 总结：组件与html公用的名称(组件名、方法名、变量名)，不要出现大写，提倡使用-语法 -->
    </div>
</body>
<script type="text/javascript">
    // 创建局部组件:就是一个拥有模板(满足vue写法)的对象
    var localTag = {
        // 模板
        // 错误: 只能解析第一个标签，以它作为根标签
        // template: '<div>局部组件1</div><div>局部组件2</div>'
        template: '
        <div>
            <div>局部组件1</div>
            <div>局部组件2</div>
        </div>'
    }
    // 局部组件需要被使用它的父组件注册才能在父组件中使用

    // 模板: html代码块
    // 根组件，拥有模板，可以显式的方式来书写template，一般不提倡，模板就是挂载点及内部所有内容
    // 注：挂载点内部一般不书写任何内容
    new Vue({
        el: '#app', // old
        // template: '<div></div>' // new
        // 用components进行组件的注册

        // ①
        // components: {
        //     'localtag': localTag
        // }

        // ②
        // components: {
        //     'local-tag': localTag
        // }

        // ③
        // components: {
        //     'localTag': localTag
        // }

        // ④
        components: {
             'LocalTag': localTag
        }

        // ⑤
        // ES6 key与value一直，可以单独写key
        // components: {
        //     localTag
        // }
    })
</script>
</html>

局部组件.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <global-tag></global-tag>
        <global-tag></global-tag>
    </div>
</body>
<script type="text/javascript">
    // 创建全局组件： 组件名, {template:''}
    Vue.component('global-tag', {
        // data: function () {
        //     return {
        //         num: 0
        //     }
        // },
        data () {
            return {
                num: 0
            }
        },
        template: '<button @click="btnClick">点击了{{num}}下</button>',
        methods: {
            btnClick () {
                console.log("你丫点我了！！！");
                this.num ++
            }
        }
    })

    new Vue({
        el: '#app',
        data: {

        }
    })
</script>
</html>

全局组件.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>父传子</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 通过属性绑定的方式 -->
        <!-- <global-tag v-bind:abc='sup_d1' :supD2='sup_d2'></global-tag> -->
        <global-tag v-bind:abc='sup_d1' :sup_d2='sup_d2'></global-tag>
        <!-- 模板名用-连接命名，属性名用_连接命名 -->
    </div>
</body>
<script type="text/javascript">
    // 子组件需要接受数据
    Vue.component('global-tag', {
        // 通过props来接收绑定数据的属性
        // props: ['abc', 'supd2'],
        props: ['abc', 'sup_d2'],
        // template: '<div><p @click="fn">{{ abc }}</p></div>',
        template: '<div><p @click="fn(abc)">{{ abc }}</p></div>',
        methods: {
            // fn () {
            //     alert(this.abc)
            // }
            fn (obj) {
                console.log(obj, this.sup_d2)
            }
        }
    })

    // 数据是父组件的
    new Vue({
        el: '#app',
        data: {
            sup_d1: "普通字符串",
            sup_d2: [1, 2, 3, 4, 5]
        }
    })
</script>
</html>

父组件传递数据给子组件.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>子传父</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 通过发送事件请求的方式进行数据传递(数据作为请求事件的参数) -->
        <global-tag @send_data='receiveData'></global-tag>
        <p>{{ msg }}</p>
    </div>
</body>
<script type="text/javascript">
    Vue.component('global-tag', {
        data () {
            return {
                sub_v1: '普通字符串',
                sub_v2: [1, 2, 3, 4, 5]
            }
        },
        template: '<button @click="btnClick">发送</button>',
        methods: {
            btnClick () {
                console.log("子>>> ", this.sub_v1, this.sub_v2);
                // 通过emit方法将数据已指定的事件发生出去
                // 事件名, 参数...
                this.$emit("send_data", this.sub_v1, this.sub_v2)
            }
        }
    })

    // 数据是父组件的
    new Vue({
        el: '#app',
        data: {
            msg: ''
        },
        methods: {
            receiveData(obj1, obj2) {
                console.log("父>>> ", obj1, obj2)
                this.msg = obj2;
            }
        }
    })
</script>
</html>

子组件传递数据给父组件.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>组件todoList</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" v-model='in_val'>
            <button @click='pushAction'>提交</button>
        </div>    
        <!-- <ul>
            <li @click='deleteAction(index)' v-for='(item,index) in list' :key="index">{{ item }}</li>
        </ul> -->

        <!-- 父 将list传输给 子 -->
        <todo-list :list_data='list' @delete_action='deleteAction'></todo-list>

    </div>
</body>
<script type="text/javascript">
    Vue.component('todo-list', {
        props: ['list_data'],
        template: '<ul><li v-for="(e, i) in list_data" :key="i" @click="li_action(i)">{{e}}</li></ul>',
        methods: {
            li_action (index) {
                // 子 反馈index给 父
                this.$emit('delete_action', index);
            }
        }
    })


    new Vue({
        el: '#app',
        data: {
            in_val: '',
            list: []
        },
        methods: {
            pushAction () {
                this.list.push(this.in_val);
                this.in_val = ''
            },
            deleteAction (index) {
                this.list.splice(index, 1);
            }
        }
    })
</script>
</html>

父子组件实现todolist.html

一组件介绍

每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点
每个组件模板只能拥有一个根标签
子组件的数据具有作用域，以达到组件的复用

二局部组件

<div id="app">
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
<script>
    var localTag = {
        data () {
            return {
                count: 0
            }
        },
        template: '<button @click="btnAction">局部{{ count }}</button>',
        methods: {
            btnAction () {
                this.count ++
            }
        }
    }
    new Vue({
        el: "#app",
        components: {
            'local-tag': localTag
        }
    })
</script>

View Code

三全局组件

<div id="app">
    <global-tag></global-tag>
    <global-tag></global-tag>
</div>
<script>
    Vue.component('global-tag', {
        data () {
            return {
                count: 0
            }
        },
        template: '<button @click="btnAction">全局{{ count }}</button>',
        methods: {
            btnAction () {
                this.count ++
            }
        }
    })
    new Vue({
        el: "#app"
    })
</script>

View Code

四父组件传递数据给子组件

通过绑定属性的方式进行数据传递

<div id="app">
    <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
</div>
<script type="text/javascript">
    Vue.component('global-tag', {
        props:['sup_data1', 'supdata2'],
        template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'
    })
    new Vue({
        el: '#app',
        data: {
            sup_data1: '数据1',
            sup_data2: '数据2'
        }
    })
</script>

View Code

五子组件传递数据给父组件

通过发送事件请求的方式进行数据传递

<div id="app">
    <global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">
    Vue.component('global-tag', {
        data () {
            return {
                sub_data1: "数据1",
                sub_data2: '数据2'
            }
        },
        template: '<div @click="clickAction">发生</div>',
        methods: {
            clickAction () {
                this.$emit('send_action', this.sub_data1, this.sub_data2)
            }
        }
    })
    new Vue({
        el: '#app',
        methods: {
            receiveAction (v1, v2) {
                console.log(v1, v2)
            }
        }
    })
</script>

View Code

六父子组件实现todolist

<div id="app">
    <div>
        <input type="text" v-model='value'>
        <button @click='click'>提交</button>
    </div>
    <ul>
        <item
              v-for='(e, i) in list'
              :key='i'
              :ele='e'
              :index='i'
              @delete='deleteAction'
              ></item>
    </ul>
</div>
<script type="text/javascript">
    Vue.component('item', {
        props: ['ele', 'index'],
        template: '<li @click="item_click">{{ ele }}</li>',
        methods: {
            item_click: function () {
                this.$emit('delete', this.index)
            }
        }
    })
    new Vue({
        el: '#app',
        data: {
            value: '',
            list: [],
        },
        methods: {
            click: function () {
                this.list.push(this.value)
                this.value = ''
            },
            deleteAction: function (index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>

View Code

七搭建vue开发环境

　　1 安装nodejs

　　官网下载安装：https://nodejs.org/zh-cn/

　　2 安装脚手架

　　vue官网 => 学习 => 教程 => 安装 => 命令行工具(CLI)

　　安装全局vue：npm install -g @vue/cli

　　在指定目录创建vue项目：vue create my-project

　　进入项目目录启动项目：npm run serve

　　通过指定服务器路径访问项目页面：http://localhost:8080/

　　3 项目创建

　　babel：是一个 JavaScript 编译器。
　　eslint：是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

　　4 vue基础模板

<template>
    
</template>
<script>
    export default {
        
    }
</script>
<style scoped>
</style>

View Code

查看全文

相关阅读:
HDOJ 4747 Mex
HDU 1203 I NEED A OFFER!
HDU 2616 Kill the monster
HDU 3496 Watch The Movie
Codeforces 347A A. Difference Row
Codeforces 347B B. Fixed Points
Codeforces 372B B. Hungry Sequence
HDU 1476 Sudoku Killer
HDU 1987 How many ways
HDU 2564 词组缩写

原文地址：https://www.cnblogs.com/xujinjin18/p/9756977.html