Vue框架简介及简单使用

目录

Vue框架学习--Part1

一、前端框架介绍

前台框架：angular(facebook)、react(github)、vue(尤雨溪)

vue从前两大框架中衍生而来。

目前react和vue应用的比较多。

二、vue框架简介

vue特点：有前两大框架优点，摈弃缺点；但没有前两个框架健全

vue优点：中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、

数据驱动思想(相比DOM驱动)

三、vue使用初体验

1. vue如何在页面中引入

  1. 通过script标签引入vue.js环境。
  2. 创建vue实例。
  3. 通过el进行挂载（直接将标签名与el对应即可挂载，该标签即为挂载点）。
  4. 为了与div进行区分，选择用section作为根块级标签，它跟div的作用是一样的，就是名字不一样。
<body>
    <section>
        <div id="d1">
            {{ msg }}  这里的msg为一个变量值，通过vue给其传值
            <p v-on:click="pClick" v-bind:style="pStyle">
                {{ info }}
            </p>
        </div>
        <hr>
        <div class="d2">
            {{}}  不加空格就不会被vue识别，会直接在浏览器中渲染出来
        </div>
        <hr>
        <div class="d2">
            {{ }}
        </div>
    </section>
</body>

<script src="js/vue.js"></script> 加载vue框架
<script>
    let app = new Vue({
        el: 'section',
        data: {  // data为挂载点内部提供数据
            msg: 'message',
            info: '信息',
            pStyle: {
                color: 'yellowgreen'
            }
        },
        methods: {
            pClick: function () {
                if (app.pStyle.color !== 'yellowgreen') {
                    app.pStyle.color = 'yellowgreen'
                } else {
                    app.pStyle.color = 'red'
                }
                console.log(app.msg);
                console.log(app.pClick);
                console.log(this.msg);
                console.log(this.pClick);
            }
        }
    });
	// 实例外部需要访问实例内部的属性，需要将实例用一个变量接收
    console.log(app.msg)
</script>

注意：

  1. 通常挂载点都采用id选择器（挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果，因此使用具有唯一性的id作为选择器）。
  2. html与body标签不能作为挂载点。
  3. 挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果。

声明的实例是否用一个变量接收

  1. 在实例内部不需要，用this就代表当前vue实例本身。
  2. 在实例外部或其他实例内部需要，定义一个变量接收new Vue()产生的实例

2. 插值表达式

插值表达式由{}组成，其内部可以放入变量且可以进行一些简单的运算或操作。

<div id="app">
    <p>{{ msg }}</p>
    <p>{{ num * 10 }}</p>
    <p>{{ msg + num }}</p>
    <p>{{ msg[1] }}</p>
    <p>{{ msg.split('') }}</p>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '信息',
            num: 10
        }
    })
</script>

# 实际页面：
信息
100
信息10
息
[ "信", "息" ]

3. 文本指令

1. {{ }}
2. v-text：不能解析html语法的文本，会原样输出
3. v-html：能解析html语法的文本
4. v-once：处理的标签的内容只能被解析一次


-----------------------------------------------
<body>
    <div id="app">
        <p>{{ msg.split('') }}</p>
        <p v-text="msg.split('')">12345</p>
        <p v-text="info"></p>
        <p v-html="info"></p>
        <hr>
        <p v-on:click="pClick" v-once>{{ msg + info }}</p>
        <p>{{ msg }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message',
            info: '<i>info</i>'
        },
        methods: {
            pClick: function () {
                this.msg = '信息'
            }
        }
    })
</script>

4. 方法指令(事件指令)

事件指令： v-on:事件名="方法变量"

简写： @事件名="方法变量"

事件加括号就是告诉系统我要自己传参，不加括号自动传事件对象。

<body>
    <div id="app">
        <p v-on:click="f1">{{ msg }}</p>
        <p @click="f1">{{ msg }}</p>
        <hr>
        <!--mouseover对应mouseenter  |  mouseout对应mouseleave-->
        <p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
        <hr>

        <!-- 事件变量，不添加()，默认会传事件对象: $event -->
        <!-- 事件变量，添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象 -->
        <p @click="f8($event, '第一个')">{{ info }}</p>
        <p @click="f8($event, '第二个')">{{ info }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '点击切换',
            action: '鼠标事件',
            info: '确定点击者'
        },
        methods: {
            f1 () {
                this.msg = '点击了'
            },
            f2 () {
                this.action = '悬浮';
                console.log('悬浮')
            },
            f3 () {
                this.action = '离开'
            },
            f4 () {
                this.action = '按下'
            },
            f5 () {
                this.action = '抬起'
            },
            f6 () {
                this.action = '移动';
                console.log('移动')
            },
            f7 () {
                this.action = '右键';
            },
            f8 (ev, argv) {
                console.log(ev, argv);
                this.info = argv + '点击了';
            }
        }
    })
</script>

5. 属性指令

属性指令： v-bind:属性名="变量"

简写： :属性名="变量"

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .d2 {
            border-radius: 50%;
        }
        .d3 {
            border-radius: 20%;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--属性指令：   v-bind:属性名="变量"
            简写：       :属性名="变量"
        -->
        <p style="color: red" class="dd1" abc="def" title="悬浮提示">红色字体</p>

        <!--1、简单使用-->
        <p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p>
        <!--<img :src="img_src" alt="">-->


        <!--2、class属性绑定-->
        <!--c1变量的值就是类名-->
        <p :class="c1"></p>

        <!--多类名可以用[]语法，采用多个变量来控制-->
        <p :class="[c2, c3]"></p>
        <!--选择器位可以设置为变量，也可以设置为常量-->
        <p :class="['d1', c4]"></p>

        <!--{类名: 布尔值}控制某类名是否起作用-->
        <!--<p :class="{x1: false}"></p>-->
        <!--多种语法混用-->
        <p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>


        <!--3、style属性绑定(了解)-->
        <p :style="myStyle">样式属性</p>
        <p :style="{width: w,height: h, backgroundColor: bgc}">样式属性</p>
    </div>
</body>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            pTitle: '简单使用',
            def: '自定义属性',
            img_src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
            c1: 'd1 d2',
            c2: 'd1',
            c3: 'd3',
            c4: 'd3',
            is_true: true,
            myStyle: {
                width: '100px',
                height: '100px',
                backgroundColor: 'red'
            },
            w: '200px',
            h: '100px',
            bgc: 'green'
        },
        methods: {
            changeImg() {
                this.img_src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
            }
        }
    })
</script>

四、js数据类型补充

1.js数据类型

js中数据类型主要有：undefiend、null、string、number、boolean、object(Array)、function等。

js用来声明数据变量的关键字有：var、let、const、不写 这四种。

其中：

let不是用来替换var的；

let、const定义的变量不能重新定义；

且let只能作用于块级作用域(大括号内就是块级作用域)；

不加声明词定义全局变量。

function f() {
    d = 40; // 全局变量
}
f();  // 必须运行函数才会执行里面的代码
console.log(d);  
// 40

const c = 30;  // 常量
console.log(c);
// 30

if (1) {
    // 大括号里面属于块级作用域
    var a = 10;
    let b = 20;  // let、const定义的变量不能重复定义，且作用于块级作用域
    console.log(b);
    // 20 
}
console.log(a);  // 10
console.log(b);  // not defind

for (var i = 0; i < 5; i++) {
    console.log(i);
}
// 0、1、2、3、4
console.log(i);  // 5

for (let i = 0; i < 5; i++) {
    console.log(i);
}
// 0、1、2、3、4 
console.log(i);  // 5

2. js函数

箭头函数和普通函数有本质区别：

箭头函数没有函数体，只有结果，可以不写大括号和return。

而且箭头函数没有原型，内部调用this会被父级变量的this捕获。

// js定义函数有三种方法
// 第一种
function f1() {
    console.log('f1 run');
}
// 第二种
let f2 = function () {
    console.log('f2 run');
};
f2();
// 第三种
let f3 = () => {
    console.log('f3 run');
};
f3();

箭头函数的定义可以简写：

// 如果箭头函数没有函数体，只有返回值，可以不写{}
let f4 = (n1, n2) =>  n1 + n2;
let res = f4(10, 25);
console.log(res);

// 如果箭头函数参数列表只有一个，可以不写()
let f5 = num => num * 10;
res = f5(10);
console.log(res);

重点：function、箭头函数、方法都具有本质区别！

类中定义箭头函数，该箭头函数无法访问类实例化对象的this属性。

let obj = {
    // 类的属性
    name: 'Jerry',
    
    // function普通函数
    eat: function (food) {
        console.log(this);
        console.log(this.name + '在吃' + food)
        // {name: "Jerry", eat: ƒ}
        // Jerry在吃food
    },
    
    // 箭头函数
    eat: food => {
        console.log(this);
        console.log(this.name + '在吃 + food)
        // Window {parent: Window, postMessage: ƒ,…}
        // 在吃food
        // 发现无法访问this
    },
    
    // 类的方法
    eat(food) {  // 方法的语法
        console.log(this);
        console.log(this.name + '在吃' + food)
        // {name: "Jerry", eat: ƒ}
        // Jerry在吃food
    }
};

obj.eat('food');
posted @ 2019-12-16 21:33  Donner  阅读(5635)  评论(0)  编辑  收藏  举报