首页 > Web开发 > 详细

vue基本语法 JS补充

时间：2019-12-16 21:27:08      阅读：80      评论：0      收藏：0      [点我收藏+]

目录

一、VUE框架入门

1. vue框架的优势

  • 前端框架有：angular，react，vue
  • vue有前面两发框架的优势，去除了他们的缺点，但没有前面俩个框架健全。
  • vue的优点：中文的API，单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想（相比于原生JS的DOM驱动）
    • 数据驱动思想：即采用变量来替代原来的各种原生DOM操作，且变量是保存在内存中，即我们进行的是虚拟DOM，这样不但减少了IO操作，还提高了网页的浏览效率，降低了服务端压力。

二、VUE框架的基本使用

1. vue的引用

  • 同Bootstrap一样，vue也是需要下载后导入到要编辑的html页面中使用
    • vue的导入：
      • 官方文档下载
      • 通过script标签导入vue.js环境
      • 通过el挂载

2. vue的基本语法结构

  • 注意：vue 不能挂载body标签和html标签
<script>
    new Vue({
        el: '#app',  // el 用来挂载标签，挂载标签后，该标签内的所有子标签中的变量都可以找到。一般一个页面只挂载一个标签    注意：vue 不能挂载body标签和html标签
        data: {
            msg: 'message',  // data 用来给页面上的变量赋值，格式是：变量名:变量值  （变量名不需要加双单引号，除非当表里名时关键字，要加双单引号）
            
        },
        methods: {  // method 用来书写方法，
            pClick: function () {
                this.msg = '信息'
            }
        }
    })
</script>

2. 插值表达式

<!--语法--> 

{{ }}

// 例子：
<!--为空时--> 
<p>{{ }}}</p>

<!--有值时--> 
<p>{{ 变量名 }}}</p>
  • 当双大括号内为空时，双大括号中间必须要有一个空格，不然会当做普通文本渲染成{{}}，有空格才会正常被解析。

3. 文本指令

  • 文本指令指的是，我们赋给变量的值是被解析成html格式数据，还是解析成普通文本，以及解析的次数。

（1）v-text

  • 不能解析html语法的文本，会原样输出
<p v-text="info"></p>  <!--最后浏览器上展示的是 <i>info</i> -->

<script>
    new Vue({
        el: '#app',
        data: {
            
            info: '<i>info</i>'
        },
    })
</script>

（2）v-html

  • 能解析html语法的文本
<p v-html="info"></p>  <!--最后浏览器上展示的是斜体的 info  -->

<script>
    new Vue({
        el: '#app',
        data: {
            
            info: '<i>info</i>'
        },
    })
</script>

（3）v-once

  • 处理的标签内容只能被解析一次
<p v-on:click="pClick" v-once>{{ msg + info }}</p>  <!--此处在浏览器上展示的内容始终是 message我们的 ，因为在浏览器第一次展示时，就已经解析过一次该文本了，所以之后无论发生什么变化，msg + info 的值都是显示最初的值-->


<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message',
            info: '我们的'
        },
        methods: {
            pClick: function () {
                this.msg = '信息'
            }
        }
    })
</script>

4. 方法指令

  • 方法指令是指在标签中绑定的各种事件

（1）v-on:事件="变量名"

  • 方法指令可以简写成：
    • @事件="变量名"
    • @事件="变量()"
    • @事件="变量($event, ...)"

  • 当变量名不加括号时，vue会自动传一个参数：事件对象（$event）

  • 当变量名加括号时，代表自定义传参，系统不再自动传入事件对象，但我们也可以手动传。

  • 事件绑定后，在vue的methods中进行书写事件的内容。

  • 下面包含点击事件（click），鼠标悬浮事件（mouseover）和鼠标移动（mousemove）、鼠标离开事件（mouseout）、鼠标按下不放事件（mousedown）、鼠标抬起事件（mouseup）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<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>
</html>

5. 属性指令

（1）v-bind:属性名="变量名"

  • 属性指令也可简写成：:属性名="变量名"

  • 属性指令可以对标签添加任意的属性

    • 添加普通属性：:title="t1"
    • 添加类属性：:class="c1" 或 :class="[c1, c2]" 或 :class="[‘c1‘, c2]" 或 :class="{c1: true}"
      • 上面的添加类属性时，若变量名被双单引号引住时，那么在vue中，不用再对该变量进行赋值，该变量的变量值就是它本身，可以直接使用
      • 上面添加类属性的最后一种方式表示当c1对应的是true时，c1类生效，当c1对应的是false时，c1类不生效
    • 添加样式属性：:style="s1" 或 :style="{color: c1, fontSize: f1}"
<!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">
        <!--属性指令：   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>
</html>

三、JS补充

  • 箭头函数和function普通函数和面向对象的方法之间的区别

1. 首先他们的定义方式不同

// 普通function函数

function f1() {
  console.log("Hello world!");
}

// 箭头函数

var 函数名 = (形参) => 返回值

// 如
var f = () => 5;

// 面向对象的方法（如下 fn）

methods: {
            fn () {
                // axios插件
                let _this = this;
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {

                          },
                            })
                  }
        }

2. 他们内部的this方法作用不同

  • 箭头函数内部的this方法会去找他的上一级的对象（如本箭头函数为ff，obj1.obj2.ff ,那么ff内部的this就是obj1）
  • 普通function函数和面向对象的方法内部的this方法会去从当前往上面找，找到一个对象就停下（即这两个的this表示调用本函数或本方法的对象）。

实例演示


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>函数补充</title>
</head>
<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 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、箭头函数、方法都具有本质区别
    let obj = {
        name: 'Jerry',
        // eat: function (food) {
        //     console.log(this);
        //     console.log(this.name + '在吃' + food)
        // },
        // eat: food => {
        //     console.log(this);
        //     console.log(this.name + '在' + food)
        // },
        eat(food) {  // 方法的语法
            console.log(this);
            console.log(this.name + '在' + food)
        }
    };
    obj.eat('food');

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

                    },
                }).then(function (response) {
                    _this.res = response.data;
                })
            },
            fn1 () {
                // axios插件
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {

                    },
                }).then(response => {
                    this.res = response.data;
                })
            }
        }
    })
</script>
</html>

vue基本语法 JS补充

原文：https://www.cnblogs.com/Mcoming/p/12051384.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！