1月13-vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <!--
          1. my.js文件：  document.write("outer js");
          2. html网页： script标签的src属性引入外部定义的js文件
        -->
        <script type="text/javascript" src="js/my.js" ></script>
        <script>
            /*
             * 在html网页里面引入javascript
             *  方式一:
             *        html网页里面,书写script标签,里面定义js代码
             *        缺点:
             *           1.js代码不能重复使用(不能在其它网页里面使用)
             *           2.html标签和js代码耦合了,后期不便于修改和维护
             *        优点:
             *            html网页和js代码写在一起,便于阅读和调试.
             *        小结: 在开发环境下(代码处于编码阶段),使用方式一.
             *  方式二:
             *        1.在外部定义一个js文件
             *        2.在html网页里面,通过script标签的src属性引入外部的js文件
             *        缺点:
             *            js代码是单独的一个文件,所以在html阅读起来麻烦.
             *        优点:
             *           1.js代码可以重复使用
             *           2. js代码和html网页解耦合,便于修改和维护
             *        小结: 在生产环境下(代码全部发完毕,上线),使用方式二
             */
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--引入外部的js文件: 定义的前端框架,提高开发效率-->
        <script src="js/b.js" type="text/javascript" ></script>
        <script>
            /*
             *  需求:抽奖系统,随机抽取获奖的幸运用户.
                 分析思路:
                 1. 数组: 保存多个用户的姓名
                 2. 随机索引就可以了: 通过随机索引获取数组中的人名
             */
            //1.定义一个数组:保存多个用户的姓名
            // 9个人名: 0-8
            var arr = ["小闹","小平","小黑","小明"];
            //2. 使用外部框架定义好的方法
            var index = getRandom(arr);
            //3.根据index从数组中获取人名: 人名也是随机的
            var name =arr[index];
            document.write(name);
        </script>
    </body>
</html>

框架(framework) == 前端框架: 为开发前端代码服务的比如: vue.js, node.js,reactive.js 等等 == 后端框架: 为开发后端代码服务的比如: spring, mybatis, springboot,springcloud == 自定义框架比如: 刚才定义的前端框架 a.js 小结: 框架是一个"半成品"的应用, 我们实际开发中,基于框架开发,提高开发效率需求: 抽奖系统,随机抽取获奖的幸运用户. ============================================================= 2.Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
框架: vue前端框架,作用: 提高前端代码的开发效率
渐进式框架: 基于vue框架进行二次开发,满足我们公司项目的需求
视图层: 指的html+css,指的在html进行数据的展示,不关心前端业务逻辑的书写
业务逻辑: 可以这样理解在js代码里面写的判断以及循环这些代码.
特点: 1. 好学 2. 好用
问题: 在网页中如何使用vue? 只需要在html网页里面引入vue.js就可以了
- 入门案例时1. 在html引入vue.js2. 在html里面,使用div指定vue的作用范围3. 创建vue对象,vue对象的参数是一个json - el : 通过选择器,来指定vue在html网页里面的作用范围- data: 用来在html网页里面展示数据的- methods: 用来定义函数4. Vue的指令- 指令: 指的带 v-指令的名称, 不同的指令有不同的作用- 指令使用的位置: 指令通常使用在标签的属性. 比如:<a 指令>xx- 常见的指令 1. v-html : 给标签设置标签体(等同于innerHTML)2. v-bind : 给标签的属性赋值(等同于标签对象.属性= 赋值)1. v-if v-else-if v-else 作用: 如果符合条件,显示数据,反之不显示内容 4. v-show 作用: 如果符合条件,显示数据,反之不显示内容2. 条件指令的区别 v-if v-else-if v-else: 条件不成立时,删除标签 v-show : 条件不成立时,使用dispaly:none隐藏标签3. 事件指令: 方式一: v-on:事件名称=“函数名称()” 方式二: @事件名称=“函数名称()” 注意: 1.事件名称不要加on 比如: ccc <button @click=“test1()”>ccc 2.事件名称赋值:函数时,小括号也可以省略不写.建议写上小括号比如:<button @click=“test1”>ccc

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--2. div指定vue的作用范围 -->
        <div id="app">
            {{msg}}
        </div>
        <!--1.在html引入vue.js-->
        <script src="js/vue.js" type="text/javascript"></script>
        <script>
            /*
             * 如何使用vue
             * 1.在网页里面引入vue.js
             * 2.在html网页里面指定vue的作用范围,通常情况下使用div指定范围
             * 3.创建vue对象,给vue对象赋值,那个值就是一个json数据
             */
            //3.定义vue对象的参数
            var config = {
                "el":"#app",
                "data":{
                    "msg":"hello vue!",
                 }
            }
            //4.创建vue对象
            new Vue(config);
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--2.div指定vue的作用范围:-->
        <div id="app">
            
        </div>
        <!--1,在html引入vue-->
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <!--3.创建vue对象-->
        <script type="text/javascript">
            //1.定义vue的参数: json, 设计语法,定义函数,名称?
            var config = {
                "el":"#app",
                "data":{
                    "msg":"hello vue"
                 },
                 "methods":{
                     //定义函数
                     test1(){
                         document.write("定义方法的test1");
                     }
                 },
            }
            //2.创建vue对象
            var vu = new Vue(config);
            //3.通过vue调用方法
            vu.test1();
        </script>
    
    </body>
</html>

<div id="app">
            <!--将msg的内容,显示到a标签里面-->
            <a href="http://www.tedu.cn" v-html="msg" ></a>
            <a v-bind:href="url" >点击我,去达内</a>
        </div>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--    
                v-if条件指令: 条件表达式,用比较运算符,可以用逻辑运算符
                num>2: 条件成立,返回的结果是true
                num>20: 条件不成立,返回的结果是false,不显示数据
            -->
            <a href="index.html" v-if="num>20">1111</a>
            <hr />
           <a href="index.html" v-else-if="num>3">2222</a>
          
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script>
            //1.创建对象,传递json参数
            // 什么时候加逗号: 只要是key:value,就要加逗号
            // json中key: 可以不加引号,建议最好加上引号
            // json中value: 除数字以外.必须都得加引号
            new Vue({
                "el": "#app",
                "data":{
                    "num":10,
                    "name":"jack"
                },
                
            });
        </script>    
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
         <div v-if="num>12">1111</div>
         <div v-else-if="num>2">22222</div>
        </div>
        <script type="text/javascript" src="js/vuejs-2.5.16.js"></script>
        <script>
            //1.创建对象,传递json参数
            // 什么时候加逗号: 只要是key:value,就要加逗号
            // json中key: 可以不加引号,建议最好加上引号
            // json中value: 除数字以外.必须都得加引号
            new Vue({
                "el": "#app",
                "data":{
                     num:10,
                    "name":"jack"
                },
                
            });
        </script>    
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--第2步:指定vue的范围-->
        <div id="app">
            <button v-on:click="test1()">方式一绑定</button>
            <button @click="test2()">方式二绑定</button>
        </div>
        <!--第1步,引入vue.js-->
        <script type="text/javascript" src="js/vue.js" ></script>
         <script type="text/javascript">
             //3.创建vue对象
             // json参数里面: el, data, methods 都是固定的
             new Vue({
                 "el":"#app",
                 "methods":{
                     //4.方式一绑定
                     test1:function(){
                         console.log(1111);
                     },
                     //5.方式二绑定
                     test2(){
                         console.log(2222);
                     },
                 },
                 
                 
             });
         </script>
    
    
    
    </body>
</html>

标签： vue.js javascript 前端

本文转载自: https://blog.csdn.net/caozhisanguo/article/details/122453067
版权归原作者 小码哥的进阶 所有，如有侵权，请联系我们删除。

发表评论

“1月13-vue”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航