进入内容

vue

vue操作简易

第一步:是从官网上下载然后导入

第二部:挂载 vue与页面的关系

挂载必须是匹配一次就能得到结果的语法

1.通常挂载电都采用的是id选择器,而且html和body标签是不能作为挂载点的

2.实例内部不需要使用一个变量,因为this可以代表当前vue本身,如果在外部或者其他的实例内部需要,就定义一个变量接受new vue()产生的实例

{{}}

{{}}里面可以放下很多的变量名

如果在挂载点给{{}}中的变量名赋值,可以在{{}}中进行运算以及取值,这边举个例子应该就能说清楚了

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ num * 10 }}</p>
        <p>{{ msg + num }}</p>
        <p>{{ msg[1] }}</p>
        <p>{{ msg.split('') }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'msg',
            num: 10
        }
    })
</script>
</html>

看上面p标签当中的内容是可以进行计算的

v-text

因为是text,所以不能解析html语法的文本,会被原模原样的输出

v-html

这个就可以解析文本中html语法的内容了.

v-once

从名字就能看出只能被解析一次

面向对象的js

这里就是对以前js的一些回忆,不过今天讲这个有一种反客为主的感觉,因为今天的js内容是真的有点多

然后就是因为是面向对象,所以肯定有类,那么类的定义就是

  function F2(name) {
        this.name = name;
        this.eat = function (food) {
            console.log(this.name + '在' + food);
        }

    let obj = {
        name: 'Jerry',
        // eat: function (food) {
        //     console.log(this.name + '在' + food)
        // },
        eat(food) {  // 方法的语法
            console.log(this.name + '在' + food)
        }
    };
    console.log(obj.name);#相当于python的print

然后是函数的补充

函数是可以简写的

比如function(food)可以简写成food=>

事件指令

v-on:事件=变量

v-on:可以简写变成 @事件='变量'

或者变量后面加括号传参数,

属性指令

v-bind:属性="变量",也可缩写,变成:属性="变量"

VUE?

vue