zoukankan html css js c++ java

vue1

vue

vue框架优势

'''
前台框架：
angular（采用typescript，基于js的语言）、react（移动端开发）、vue（PC端、移动端开发）
vue ：继承了前两大框架的优点、摒弃了前两大框架的缺点，没有前两个框架健全、vue优点：中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想（操作变量，）（相比于DOM驱动（找到数据中的某一个点））
'''

页面引入

1）通过script标签引入vue.js环境

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

2）创建vue实例

let app = new Vue()

3）通过el进行挂载

<script src="js/vue.js"></script>
<script>
    `
    console.log(Vue);
    let app = new Vue({
        el: '#d1',  // 挂载点：vue实例与页面标签建立关联
    });

    new Vue({
        el: '.d2',  // 挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果
    });

总结

通常挂载点都选用id选择器（唯一性）
html与body标签不能作为挂载点，可以选择一个div最为挂载点。
挂载点采用的是css3选择器语法，但是只能匹配第一次检索到，如上面的代码只能挂载d1

vue实例内部的参数

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);
            }
        }
    });

el:挂载点
data：{ }为挂载点内部提供数据
method对象的方法，里面可以是function、箭头函数

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

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

插值表达式

<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>

文本指令

文本指令：{{ }} | v-text | v-html | v-once

<body>
    <div id="app">
        <!--
            文本指令：
            1、{{ }}
            2、v-text：不能解析html语法的文本，会原样输出
            3、v-html：能解析带有html语法的文本
            4、v-once：处理的标签的内容只能被解析一次
        -->
        <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>

方法指令

v-on:事件="变量" 、 @事件="变量" 、@事件="变量()" 、 @事件="变量($event, ...)"

<body>
    <h1>面向对象js</h1>
</body>
<script>
    // 数据类型：undefined、null、string、number、boolean、object(Array)、function
    //定义变量的方法 var、let、const、不写

    // object(Array)、function

    function f1() {
        console.log('f1 run')
    }
    f1();
    // 构造函数 == 类
    function F2(name) {
        this.name = name;
        this.eat = function (food) {
            console.log(this.name + '在' + food);
        }
    }
    let ff1 = new F2("Bob");
    console.log(ff1.name);

    let ff2 = new F2("Tom");
    console.log(ff2.name);

    ff1.eat('饺子');
    ff2.eat('sao子面');

    let obj = {
        name: 'Jerry',
        // eat: function (food) {
        //     console.log(this.name + '在' + food)
        // },
        eat(food) {  // 方法的语法
            console.log(this.name + '在' + food)
        }
    };
    console.log(obj.name);
    obj.eat('hotdog');
</script>

JS中var、let、const、不写的区别

在javascript中有三种声明变量的方式：不写、var、let、const。

不写默认是全局变量

var 声明全局变量，换句话理解就是，声明在for循环中的变量，跳出for循环同样可以使用。

声明在for循环内部的sum，跳出for循环一样可以使用，不会报错正常弹出结果

let：声明块级变量，出了相应的块标签就无法获取到变量值，且不能重复定义。

在上面的例子中，跳出for循环，再使用sum变量就会报错，有着严格的作用域，变量只作用域当前隶属的代码块，不可重复定义同一个变量，不可在声明之前调用，必须先定义再使用，会报错，循环体中可以用let

注意：必须声明'use strict';后才能使用let声明变量否则浏览并不能显示结果,

const：用于声明常量，也具有块级作用域，也可声明块级。

const PI=3.14;

它和let一样，也不能重复定义同一个变量，const一旦定义，无法修改

<body>
    <h1>测试</h1>
</body>
<script>
    // ES5 ES6

    function f() {
        d = 40; // 全局变量
    }
    f();


    console.log(d);

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


    if (1) {
        var a = 10;
        let b = 20;  // let、const定义的变量不能重复定义，且具备块级作用域
    }
    console.log(a);
    // console.log(b);

    for (let i = 0; i < 5; i++) {
        console.log(i);
    }
    // console.log(i);
    // console.log(i);
    // console.log(i);

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

箭头函数使用的方式

	//没有经过简化的箭头函数
	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的指向无法通过其他方式改变，指向的是外部的this，在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用。
function指向其直接调用者，function内部的this就是调用者本身。
构造函数：箭头函数不能当做构造函数
参数问题：箭头函数不存在arguments对象，用rest参数代替；
原型问题：箭头函数不存在原型；
箭头函数不能使用yield命令，因此箭头函数不能用作genertor函数。
变量和定义提升：
箭头函数定义函数的时候，需要var(let、const）关键字；let和const不存在变量提升，而var虽然有变量提升却不存在定义上的提升；
function存在变量和定义的提升。

方法：定义在vue类内部的methods内的箭头函数、function、方法，function可以作为类，内部会有this，箭头函数内部没有this，{}里面出现的函数称之为方法：方法名(){}。

  let obj = {
        name: 'Jerry',
      //function定义方法
        eat: function (food) {
             console.log(this);//指向实例化的对象
             console.log(this.name + '在吃' + food)
         },//{name: "Jerry", eat: ƒ}
      //箭头函数定义方法
         eat: food => {
             console.log(this);//这里的this指向的window，箭头函数内部没有this，无法指向当前对象，只能向外找找到了window。
             console.log(this.name + '在' + food)
             `Window {parent: Window, opener: null, top: Window, length: 0, frames: Window,...}`
         },
      
      //普通方法的定义
        eat(food) {  // 方法的语法
            console.log(this);//方法内有this，它的this指向该方法调用时实例化出的对象
            console.log(this.name + '在' + food)
            //{name: "Jerry", eat: ƒ}
        }
    };

vue事件指令

事件指令的使用方式：v-on:事件名="方法变量"，简写：@事件名="方法变量"，方法变量必须是已经在method内部定义的方法。事件变量，不添加()，默认会传事件对象: $event ；添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象$event。

说明：这里的事件名就是事件，后面的方法变量是当事件触发时执行的事情，和JS里的function一样。

<body>
    <div id="app">
        //事件指令的使用方式
        <!--
        事件指令：v-on:事件名="方法变量"
        简写：  @事件名="方法变量"
        -->
        <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>

属性指令

v-bind:属性="变量" 简写 :属性="变量"

:title="t1"
:class="c1"  |  :class="[c1, c2]"  |   :class="{c1: true}"
//三种使添加class属性的方式，第三种可以通过控制true和false来控制该class属性是否生效
:style="s1"  |  :style="{color: c1, fontSize: f1}"
//s1是字典变量，c1和f1变量分别控制字体颜色和大小

   <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="{ 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: {
                 '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'
            }
        }
    })

查看全文

相关阅读:
OpenJDK源码研究笔记(十二):JDBC中的元数据,数据库元数据(DatabaseMetaData),参数元数据(ParameterMetaData),结果集元数据(ResultSetMetaDa
Java实现 LeetCode 257 二叉树的所有路径
 Java实现 LeetCode 257 二叉树的所有路径
 Java实现 LeetCode 257 二叉树的所有路径
 Java实现 LeetCode 242 有效的字母异位词
 Java实现 LeetCode 242 有效的字母异位词
 Java实现 LeetCode 242 有效的字母异位词
 Java实现 LeetCode 241 为运算表达式设计优先级
 Java实现 LeetCode 241 为运算表达式设计优先级
 Java实现 LeetCode 241 为运算表达式设计优先级

原文地址：https://www.cnblogs.com/ghylpb/p/12051838.html