2. Vue

一、vue简单介绍

1. vue定义

vue是一套用于构建用户界面的渐进式框架。vue被设计为可自底向上逐层应用，vue的核心只关注视图层；vue的特点是数据驱动视图，可直接修改数据，不用再手动编写js操作DOM。

2. vue引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3. vue创建

<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 声明vue的作用域 -->
<div id="app"></div>

<!-- 创建vue实例 -->
<script>
    let app = new Vue({
        // 元素声明
        el:'#app',
        // 数据
        data:{
            content: "hello world",
        },
        // 计算属性
        computed:{
           totalScore: function () {
                return this.python + this.linux + this.go;
            }
        },
        // 事件,与v-on联动
        methods:{
            jump(){
                this.num += 1;
            }
        },
        // 侦听事件
        watch: {
            python: function (value, oldvalue) {
                console.log(value, oldvalue)
            }
        },
        // Vue路由
        router: router,
        // Vue局部组件
        components: {
            'my-header': header,
        }
    })
</script>

4. vue小实例

<body>
    <div id="app">
        <p>vue作者是{{ Author }}</p>
        <p v-html="a"></p>
        <hr>
        <a v-bind:href="BaiduURL">百度</a>
        <a :href="BaiduURL">百度</a>
        <hr>
        <!-- v-for -->
        <ul>
            <!-- v-for可设置索引，v-key有了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联 -->
            <!-- v-key可保证更改数据时，不必再重新for循环，渲染 -->
            <li v-for="(item, index) in fruit" v-bind:key="index">
                <!-- 双向数据绑定，可输入值，改变数据 -->
                <input type="number" v-model.number="item.num">
                - {{ item.name }}
                <span style="color: red" v-if="item.num == 0">卖完啦！</span>
                <button v-on:click="add(index)">+1</button>
            </li>
        </ul>
        <p>水果总数量是：{{ totalNum }}</p>
    </div>

	<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                Author: 'Youyuxi',
                a: '<a href="https://www.sogou.com/">sogou</a>',
                fruit: [
                    {'num': 10, 'name': 'apple'},
                    {'num': 3, 'name': 'banana'},
                    {'num': 0, 'name': 'strawberry'},
                    {'num': 12, 'name': 'orange'},
                ],
                BaiduURL: 'www.baidu.com'
            },
            <!-- 计算属性 -->
            computed:{
                totalNum: function () {
                    return this.fruit.reduce((x,y)=>{
                        return x+y.num;
                    }, 0)
                }
            },
            <!-- 绑定事件 -->
            methods: {
                add(index){
                    this.fruit[index].num += 1;
                }
            }
        });
    </script>
</body>