Examples

el: Examples

new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

data: data

Provides data for interpolation variable expression

Data in the data may be directly or indirectly via vue example.

In the new Vue method set brackets ({})

method: Method

Binding events v-on event

methods to provide a method for the event

delimiters: Separator

When vue of {{}}the time conflict with the template syntax, you can change the setting

new Vue({
    el: '#app',
    data: {\},
    delimiters: ['[{', '}]'],  // 修改插值表达式符号})

delimiters are dyadic array, the first element of the left side, the right side of the second element.

filter: filter

The method defined in filters filter members
A plurality of values may be filtered, the filter can have additional incoming auxiliary parameter
The filtered results can be carried out once again filtered under (filtering may be performed in series)

<body>
    <div id="app">
        <!--
        总结：
        1、在filters成员中定义过滤器方法
        2、可以对多个值进行过滤，过滤时还可以额外传入辅助参数
        3、过滤的结果可以再进行下一次过滤(过滤的串联)
        -->
        <p>{{ num | f1 }}</p>
        <p>{{ a, b | f2(30, 40) | f3 }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            a: 10,
            b: 20,
        },
        filters: {
            // 传入所有要过滤的条件，返回值就是过滤的结果
            f1 (num) {
                console.log(num);
                return num * 10;
            },
            f2 (a, b, c, d) {
                console.log(a, b, c, d);
                return a + b + c + d;
            },
            f3 (num) {
                return num * num;
            }
        }
    })
</script>

computed: computing

computed attribute can declare a method to calculate property (which property must not be declared in the data, otherwise an error will be reported repeated statement)
The method attribute must render the page, the method (result) will start the binding method attribute value is the binding method (result) of the return value.
All variables that appear in the bound method will be monitored, any change in the value of re-update will tie the callback methods to update the value of the property method
Generally used to solve: a variable value dependent on the problem of multiple variables

<body>
    <div id="app">
        <input type="number" min="0" max="100" v-model="n1">
        +
        <input type="number" min="0" max="100" v-model="n2">
        =
        <button>{{ result }}</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            n1: '',
            n2: '',
            // result: 0,
        },
        /**
         * 总结：
         * 1、computed计算属性可以声明 方法属性（方法属性一定不能在data中重复声明）
         * 2、方法属性 必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定
         * 方法的返回值
         * 3、绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会
         * 重新出发绑定方法，从而更新方法属性的值
         *
         * 一般用来解决的问题：一个变量值依赖于多个变量
         */
        computed: {
            result () {
                console.log('被调用了');
                n1 = +this.n1;
                n2 = +this.n2;
                return n1 + n2;
            }
        }
    })
</script>

watch: monitor

Listener properties need to be declared in the data, the method does not require the listener return value
Listening is listening method name attribute name ()
There are two listener callbacks: n: current value; o: previous value
Solved: the problem depends on several variables of a variable
Properties updated method is called

<body>
    <div id="app">
        <p>姓名：<input type="text" v-model="full_name"></p>
        <p>姓：{{ first_name }}</p>
        <p>名：{{ last_name }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '未知',
            last_name: '未知',
        },
        watch: {
            // n是监听的属性当前值，o是其上一次的值，监听的属性值每次更新都会回调监听方法

            /**
             * 总结：
             * 1、监听的属性需要在data中声明，监听方法不需要返回值
             * 2、监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法
             * 3、监听方法有两个回调参数：当前值，上一次值
             *
             * 解决的问题：多个变量值依赖于一个变量值
             */
            full_name(n, o) {
                name_arr = n.split('');
                this.first_name = name_arr[0];
                this.last_name = name_arr[1];
            },
        }
    })
</script>

template: Template

Template root component is to replace the template mount point

Local or global template component mount point is to replace the template

props:

Subassembly by props custom component attributes (using reflection, to fill the string, but can be used directly as the time variable)

components: registration component

Sign up using local sub-assemblies, equivalent to creating a temporary placeholder will be replaced with the point of the template after running mount

Examples of members