vue01

vue导入方式及优缺点

1.Vue加载方式一:下载到本地

<script src="js/vue.js"></script>

2.Vue加载方式一:使用cdn导入(链接)

<script src="https://cn.vuejs.org/js/vue.min.js"></script>
前台框架:angular、react、vue
vue:有前两大框架优点,摈弃缺点;没有前两个框架健全 
vue优点:
中文API
单页面应用:提升移动端app运行速度
组件化开发
数据双向绑定:变量全局通用
虚拟DOM:缓存机制
数据驱动思想(相比DOM驱动):只考虑数据,不需要在意DOM结构

Vue下载及官方文档:由此进入

挂载点

new Vue({
el:"#app", // css3选择器,一个页面可以有多个实例,对应多个挂载点
})

  1. html与body不能作为挂载点
    2)一个vue对象挂载点之后索引一个匹配结果,所以挂载点一般用id标识

插值表达式

{{ 变量以及变量的简单运算 }}

1) 用实例成员data为vue环境提供数据,数据采用字典{}形式
2) 在插值表达式{{}}中,直接书写数据的key来访问数据
3) 在外部通过接受实例的变量app,访问实例成员(实例成员都用$开头),间接访问到数据 app.$data.info
4) 在外部也可以通过实例变量app直接访问数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--Vue加载方式一:下载到本地-->
    <script src="js/vue.js"></script>
    <!--Vue加载方式一:使用cdn导入(链接)-->
    <script src="https://cn.vuejs.org/js/vue.min.js"></script>

</head>
<body>
<div id="app">
    <p>{{ info }}</p>
    <p>{{ num }}</p>
    <p>{{ arr }}</p>
    <p>{{ dic }}</p>
    <p> {{ dic['name'] }}</p>
</div>
</body>

<script>

    // 插值表达式
    let app = new Vue({
        el:'#app',
        data:{
            info :'message',
            num:100,
            result:true,
            arr:[1,3,4,5,6,],
            dic:{
                name:'zhang',
                age:22
            }
        }
    })
</script>
<script>
    console.log(app);  // 同app.$data结果一样
    console.log(app.$data);  //{arr: Array(5),dic: Object,info: "message",num: 100,result: true}
    console.log(app.$data.info);  // message
    console.log(app.info);   // message
</script>
</html>

过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
   <p> {{ num+100 }}</p>
   <p> {{ num+msg }}</p>  <!--支持字符串和数字的拼接-->
    <p> {{ msg.split('')[4] }}</p>  <!--切分取索引为4的值-->
    <p>{{ msg | f1 }}</p>
    <p>{{ num | f2 }}</p>  <!--|前的相当于传的位置实参-->
    <p>{{ 10,20,30,40 | f3 }}</p>
    <!--<p>{{ 10,20 | f3(30,40) }}</p>-->
    <p>{{ 10 | f3}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num:100,
            msg:'hello',
        },
        filters:{
            f1:function() {
                return '过滤后的结果'
            },
            f2:function(num) {
                return num*3
            },
            f3:function(a,b,c,d) {
                return a+b+c+d
            }
        }
    })
</script>
</html>

文本指令

1)v-指令名="变量",变量是需要data提供数据值的;
2)v-指令名="常量",常量采用常量基本的语法,数字与布尔类型等可以直接书写的直接书写,字符串等需要特殊符号的需要添加符号;
3)v-html可以解析html语法;

4) 反引号:可以在一对反引号内些多行文本,可以是普通文本,也可以是事先定义好的变量;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-text="msg"></p>
    <p v-text="123"></p>
    <p v-text="true"></p>
    <p v-text="'abc'"></p>  <!-- 字符串常量-->
    <p v-text="'abc' + msg"></p>
    <p v-text="[1,2,3]"></p>
    <p v-text="[a,b,c]"></p>

    <p v-html="`<b style='color:red'>好的</b>`"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
        el:'#app',
        data:{
            num:100,
            msg:'hello',
            a:1,
            b:2,
            c:3
        }
    });
</script>
<script>
    let s1 = `第一行
第二行
结束`;
    console.log(s1);
    let name='zhang';
    let age=22;
    let s2=`
name:${name}
age:${age}
`;
    console.log(s2);
</script>
</html>

js面向对象

js语法中{}就是一个对象,可以意通过点取值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
<script>
    function f1() {
        console.log('f1 fun')
    }
    f1();

    // 构造函数==> 类
    function F2(name) {  // 构造函数的函数名通常遵循驼峰体命名法,首字母大写
        this.name = name;  // 在对象的名称空间设置属性
        console.log(this);  // this类似于python后端的对象中的self

        this.read = function (course) {
            console.log(this.name + '在学习' + course)
        }
    }
    let f2 = new F2('Bob');
    console.log(f2.name);
    let f3 = new F2('Tom');
    console.log(f3.name);

    f2.read('English');
    f3.read('Chinese');
    /*
    F2 {name: "Bob"}
    Bob
    F2 {name: "Tom"}
    Tom
    Bob在学习English
    Tom在学习Chinese
    */

    let obj = {
        name:'zhang',
        //  这是类内部定义的方法
        // 书写方式1
        // read:function (course) {
        //     console.log(this.name + '正在学习' + course);  // zhang正在学习Basketball
        // };

        // 书写方式2
        read(course) {
            console.log(this.name + '正在学习' + course);  // zhang正在学习Basketball
        }
    };
    console.log(obj.name);  //  zhang
    obj.read('Basketball');  // zhang正在学习Basketball
    console.log(obj.read('Basketball'))  //  undefined
</script>
</html>

js原型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <i>东方国际化</i>  <!--斜体-->
</div>

</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {count:0},
    });
</script>
<script>
    // ES5中没有类只有对象,为了满足需要,在ES6中引入了类
    function A() {}
    let a1 = new A();
    let a2 = new A();
    console.log(a1.num);  // undefined
    console.log(a2.num);  //  undefined
    // 为A类添加原型,类似于类属性;
    A.prototype.num = 100;
    console.log(a1.num);  //100
    console.log(a2.num);  // 100
    console.log(A.prototype.num); // 100

    // ES6语法中的类
    class B {
       constructor (name) {
           this.name = name
       }
    }
    let b1 =new B('zhang');
    let b2 = new B('wang');
    console.log(b1.name);  // zhang
    console.log(b2.name);  // wang


</script>
</html>

js 函数

ES6中定义变量的4中方式

   var a = 10;
   let b = 20;
   const c = 30;
   d = 40;  # 不加声明词定义的是全局变量,即使在函数内部定义的在函数外部也能正常访问。如果在函数外部也有变量d,则修改全局的变量
   
let、const定义的变量不能重复定义,且具备块级作用域
全局作用域 > 块级作用) > 局部作用域
块级作用域:只要在{}内用let定义的变量就是块级作用域
局部作用域:在函数内部定义的let
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数补充</title>

</head>
<body>

</body>
<script src="js/vue.js"></script>
<script>
    d=100;
    function f() {
        var a = 10;
        let b = 20;
        const c = 30;
        d = 40;   // 全局变量, 局部变量d能修改全局的d
    }
    f();
    console.log(d);  // 40

    const e = 50;
    // var e = 60;  // 一旦一个变量被声明成常量,就不能再被重复的声明成变量
    // console.log(e)
    var ff = 11;
    let g = 22;
    var ff = 33;
    // let g = 44;  // let 也不能被重复声明
    console.log(g);  // 22
    console.log(ff);  // 33

    if (1) {
        var aa =44;
        let bb = 55;
    }
    console.log(aa);  // 44
    // console.log(bb);  //  Uncaught ReferenceError: bb is not defined

    for (var i = 0; i < 5; i++) {
        console.log(i); // 0,1,2,3,4
    }
    console.log(i);  // 5  js的内存泄漏,如果这里不像访问到内部的i,变量就用let声明
</script>
</html>

几种函数的书写方式

<script>
    function  f1() {
        console.log('f1 run');
    }
    f1();

    let f2 = function () {
        console.log('f2 run');
    };  // 定义成变量的形式,要加分号
    f2();

    let f3 = () => {
        console.log('f3 run');
    };
    f3();

    // 如果箭头函数没有函数体,只有返回值
    let f4 = (a,b) => a + b;
    let res =f4(1,2);
    console.log(res);  // 3

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

</script>

function、箭头函数、方法的区别

function和方法内部有this,箭头函数没有。
<script>
    let obj = {
        name :'zhang',
        // (1) function
        read:function (course) {
            console.log(this);  // {name: "zhang", read: ƒ}
            console.log(this.name + '在学习' + course);
        },  // zhang在学习English

        // (2) 箭头函数
        read:course => {
            console.log(this);
            // this指向   Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
            console.log(this.name + '在学习' + course);  // 在学习English   也就是箭头函数中没有this一说
        },

        // (3) 方法
        read(course)  {
            console.log(this);  // {name: "zhang", read: ƒ}
            console.log(this.name + '在学习' + course);  // zhang在学习English
        },
    };
    obj.read('English')
</script>

this指向Vue的两种方式

<script>
new Vue({
        data: {
            res: ''
        },
        methods: {
             // 方式1:
            
            fn () {
                // axios插件
                let _this = this;
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {

                    },
                }).then(function (response) {  // 如果要使用function,又想this指向Vue,可以定义一个临时变量存储this(Vue)
                    _this.res = response.data;
                })
            },
            
            // 方式2:
            fn1 () {
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {

                    },
                }).then(response => {
                    this.res = response.data;
                })
            }
        }
    })
</script>
//  这种方式function找到的是axios
<script> 
new Vue({
            fn1 () {
                // axios插件A
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {

                    },
                }).then(function(response){
                    this.res = response.data;  // 这里的this指向axios
                })
            }
        }
    })
</script>

事件指令

事件指令:   v-on:事件名="方法变量"
简写:  @事件名="方法变量"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>

</head>
<body>
<div id="app">

    <p v-on:click = "f1">{{ msg }}</p>
    <p @click = "f1">{{ msg }}</p>

    <hr>

    <p @mouseover="f2" @mouseout="f3"  @mousedown="f4" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
    <hr>

     <!-- 事件变量,不添加(),默认会传事件对象: $event -->
    <p @click="f8" >{{ info }}</p>
    <!-- 事件变量,添加(),代表要自定义传参,系统不再传入事件对象,但是可以手动传入事件对象 -->
    <p @click="f8(10,20,30)" >{{ 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 (a,b,c,d) {  // 形参
                console.log(a,b,c,d);  // 不传参的情况下,系统默认传一个参数MouseEvent undefined undefined undefined
                this.info = '点击了!!!';  // 传参的情况下就是我们自己的
            },
        },
    })


</script>
</html>

属性指令

属性指令:   v-bind:属性名="变量"
简写:       :属性名="变量"
<!DOCTYPE html>
<html lang="zh">
<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">
    
        <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>

        <!--{类名: 布尔值}控制某类名是否起作用,true就在标签内添加这个类属性,否则不添加-->
        <!--<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>
</html>
posted on 2019-12-17 01:38  jueyuanfengsheng  阅读(276)  评论(0编辑  收藏  举报