2 Vue.js基础

1 简易计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>

    <div id="app" v-model="opt">
        <input type="text" v-model="n1">

        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>

        </select >
        <input type="text" v-model="n2">

        <input type="button" value="=" @click="calc">

        <input type="text" v-model="result">

    </div>

    <script>
        var vm=new Vue({
            el:‘#app‘,
            data:{
                n1:0,
                n2:0,
                result:0,
                opt:‘+‘
            },
            methods:{
                calc(){
                    /*
                    switch (this.opt) {
                    case ‘+‘:
                        this.result = parseInt(this.n1) + parseInt(this.n2)
                        break;
                    case ‘-‘:
                        this.result = parseInt(this.n1) - parseInt(this.n2)
                        break;
                    case ‘*‘:
                        this.result = parseInt(this.n1) * parseInt(this.n2)
                        break;
                    case ‘/‘:
                        this.result = parseInt(this.n1) / parseInt(this.n2)
                        break;

                    default:
                        break;
                        */
                        //正式项目不推荐下面的写法
                    var codeStr=‘parseInt(this.n1)‘ + this.opt + ‘parseInt(this.n2)‘
                    this.result =eval(codeStr)
                }

                }
            }

        )
    </script>
</body>
</html>

  2. Vue中的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <style>
    .red{
        color: red;
    }
    .thin{
        font-weight: 200;
    }
    .italic{
        font-style: italic
    }
    .active{
        letter-spacing: 0.5em;
    }
    </style>
</head>
<body>
    <div id="app">
        <!-- <h1 class="red thin">这是一个H1!!!</h1> -->

        <!--第一种使用方法,直接传递一个数组进去,必须用单引号来分开才会认为这是一个变量,否则会直接默认为是一个字符串-->
        <!-- <h1 :class="[‘red‘,‘italic‘]">这是一个H1!!!</h1> -->

        <!--在数组中使用三元表达式-->
        <!-- <h1 :class="[‘red‘,‘italic‘,flag?‘active‘:‘‘]">这是一个H1!!!</h1> -->

        <!--用对象的形式来代替三元表达式-->
        <!-- <h1 :class="[‘red‘,‘italic‘,{‘active‘:flag}]">这是一个H1!!!</h1> -->

        <!-- 直接使用对象,或者也可以直接把classobj中的内容 直接放到class中-->

        <h1 :class="calssobj">这是一个H1!!!</h1>

    </div>

    <script>
    var vm=new Vue({
        el:"#app",
        data:{
            flag:true,
            calssobj:{red:true,thin:true,italic:false,active:false}
        },
        methods:{

        }
    })
    </script>
</body>
</html>

  3. Vue的Class样式的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <style>
    .red{
        color: red;
    }
    .thin{
        font-weight: 200;
    }
    .italic{
        font-style: italic
    }
    .active{
        letter-spacing: 0.5em;
    }
    </style>
</head>
<body>
    <div id="app">
        <!-- <h1 class="red thin">这是一个H1!!!</h1> -->

        <!--第一种使用方法,直接传递一个数组进去,必须用单引号来分开才会认为这是一个变量,否则会直接默认为是一个字符串-->
        <!-- <h1 :class="[‘red‘,‘italic‘]">这是一个H1!!!</h1> -->

        <!--在数组中使用三元表达式-->
        <!-- <h1 :class="[‘red‘,‘italic‘,flag?‘active‘:‘‘]">这是一个H1!!!</h1> -->

        <!--用对象的形式来代替三元表达式-->
        <!-- <h1 :class="[‘red‘,‘italic‘,{‘active‘:flag}]">这是一个H1!!!</h1> -->

        <!-- 直接使用对象,或者也可以直接把classobj中的内容 直接放到class中-->

        <h1 :class="calssobj">这是一个H1!!!</h1>

    </div>

    <script>
    var vm=new Vue({
        el:"#app",
        data:{
            flag:true,
            calssobj:{red:true,thin:true,italic:false,active:false}
        },
        methods:{

        }
    })
    </script>
</body>
</html>

  4. Vue的v-for的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>

</head>
<body>
    <div id="app">
        <!-- <p>{{list[0]}}</p>
        <p>{{list[1]}}</p>
        <p>{{list[2]}}</p>
        <p>{{list[3]}}</p>
        <p>{{list[4]}}</p>
        <p>{{list[5]}}</p>  -->

        <!-- <p v-for="(item,i) in list">索引:{{i}}--{{item}}</p> -->
        <p v-for="(user,i) in LT">ID:{{user.ID}} --- name:{{user.name}} --- index:{{i}}</p>

    </div>

    <script>
        var vm=new Vue({
            el:‘#app‘,
            data:{
                list:[1,2,3,4,5,6,],
                LT:[
                    {ID:1,name:‘11‘},
                    {ID:2,name:‘22‘},
                    {ID:3,name:‘33‘},
                    {ID:4,name:‘44‘}

                ]
            },
            methods:{}
        })
    </script>

</body>
</html>

  5. Vue v-for对象以及key的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>

</head>
<body>
    <div id="app">
        <!-- 遍历对象身上的键值对时 除了val,key还有一个索引i -->
        <!-- <p v-for="(val,key,i) in user">   值:{{val}}  ---  键:{{key}} 索引:{{i}}</p> -->
        <!-- <p v-for="count in 10">这是第 {{count}} 次循环</p>  //循环数字,起始是1 -->

        <!-- for循环的key的使用 -->
        <div>
            <label >Id:
                <input type="text" v-model="id">
            </label>

            <label>Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="添加" @click="add">
        </div>

        <!-- 1 在使用key的时候一定要使用v-bind属性绑定形式,制定key的值
        2 在组建中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题必须在使用v-for的同时,
        制定唯一的字符串/数字类型:key值 -->
        <p v-for="item in list" :key="item">  <!-- 可以保证数据的唯一性 -->
            <input type="checkbox">{{item.id}} ---  {{item.name}}
        </p>

    </div>

    <script>
        var vm=new Vue({
            el:‘#app‘,
            data:{
                list:[
                    {id:1,name:‘唐‘},
                    {id:2,name:‘宋‘},
                    {id:3,name:‘元‘},
                    {id:4,name:‘明‘},
                    {id:5,name:‘清‘}
                ]
            },
            methods:{
                add(){
                    this.list.unshift({id:this.id,name:this.name});
                }
            }
        })
    </script>

</body>
</html>

  6. Vue的v-if和v-show的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="button" value="点击" @click="flag=!flag">
        <!--
        v-if的特点:每次都会重新删除或创建元素  有较高的切换性能消耗
        v-show的特点:每次不会进行DOM的删除或创建操作,只是切换了元素的display:nene的属性  有较高的初始或渲染消耗
        如果元素要频繁的切换最好不要使用v-if
        如果是永久性的不显示,则推荐v-if
        -->
        <P v-if="flag">Hello</P>
        <p v-show="flag">Word</p>
    </div>

    <script>
        //2.创建一个Vue实例
        //当我们带入包之后,在浏览器内存中就多了一个Vue构造函数
        var vm =new Vue(
            {
                el:‘#app‘,
                data :{
                    flag:true
                }
            }
        )

    </script>
</body>
</html>

  

原文地址:https://www.cnblogs.com/LittleDuan/p/11257136.html

时间: 2024-10-15 16:46:54

2 Vue.js基础的相关文章

Vue.js 基础部分

### Vue.js 基础部分 ## 一. Vue.js 简介 ### 1. Vue.js 是什么 **Vue.js**也称为 Vue,读音/vju:/,类似 view,错误读音 v-u-e 版本: v2.6 - 是一个构建用户界面的框架 - 是一个轻量级 MVVM(Model-View-ViewModel)框架,和 angular.react 类似,其实就是所谓的数据双向绑定 - 数据驱动+组件化的前端开发(核心思想) - 通过简单的 API 实现**响应式的数据绑定**和**组合的视图组件*

Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.

vue.js基础__ mixins 选项

mixins 选项主要应用于新增需求: 在不改变原有方法的基础上,使用mixins 混入选项: - 以点击加1为例,分为局部和全局两种 - 再混入选项中设置updated方法 - updated 方法,会在局部,全局,以及原生方法中设置 - 执行顺序为 全局的updated优先执行,然后局部的updated方法执行,最后原生的updated方法执行 代码示例如下: <!DOCTYPE html> <html lang="en"> <head> <

vue.js基础(继)

今日,将简单地Vue.js指令形成了一个串联使用.Vue.js就是这样,是渐进式的,何为渐进式?简单的指令看起来分厂简单,浅显易懂,但是将指令进行综合,自定义事件,原生事件,子父通信,父子通信,创建实例,创建组件,注册组件,数据定义等等进行融合使用时候缺愈发的复杂.进行项目的书写.模拟.测试.以及UI库的综合使用,布局 UI库使用,通过数据控制功能,看似简单的步骤,实现起来对于初学者来讲,仍难侍候很大难度的.一定要多学多练,多练,在多练.形成自己的编程思想,编程思想非常重要. 新知识补充了VDO

vue,js基础知识

Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 Vue.js的产生核心是为了解决如下三个问题: 解决数据绑定的问题: Vue.js框架生产的主要目的是为了开发大兴单页面应用(SPA:Single Page Application) Angular.js中对PC端支持的比较良好,但是对移动端支持就一般.而Vue.js主要支持移动端,也支持PC端. 3. 它还支持组件化.也就

Vue.js 基础学习

今天我开始了Vue.js 的学习. 那么什么是Vue.js 呢? Vue.js是一套开发Web页面的JavaScript脚本框架.听起来感觉很难,不过据说,Vue.js是Web-Javascript脚本框架中最容易上手的框架.所以我便选择了先来学习这个. 要学习Vue.js首先就要获取库文件了,在网上有很多地方可以找到,我是在bootcdn上找到的 接下来我们通过Vue输出一串Hello World ! 首先引入vue. <script src="https://cdn.bootcss.c

Vue.js基础2

声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作.现在数据和 DOM 已经被绑定在一起,所有的元素

vue.js基础知识篇(2):指令详解

第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v-text,v-el,v-html,v-on,v-bind,v-ref,v-pre,v-cloak,v-if. 2.内部指令 (1)控制元素的显示与否:v-if,v-show.v-else v-if是真实的条件渲染,根据表达式的true/false在DOM中生成或移除一个元素. 第一,这个指令是惰性

vue.js基础知识篇(4):过滤器、class与style的绑定2

代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做字符串处理,不带引号的参数被当做数据属性名处理. {{message | filterFunction "arg1" arg2 }} vue.js支持在任何出现表达式的地方添加过滤器. vue.js支持链式调用,上一个过滤器的输出结果作为下一个过滤器的输入.类似于Linux shell的管

vue.js基础知识篇(5):过渡、Method和Vue实例方法

第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEventListener方法添加事件监听,但并不推荐,因为它并不符合"关注点分离"的设计理念. 使用v-on指令有几点好处: 通过HTML模板(视图)就能看到js对应的方法;无需手动绑定事件,ViewModel和DOM完全解耦.易于测试;当一个ViewModel被销毁时,所有的事件处理器都会被自