98vue.js简单入门

Posted 布吉岛丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了98vue.js简单入门相关的知识,希望对你有一定的参考价值。

本篇导航:

 

一、介绍与安装

vue是一套构建用户界面的javascript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

1、安装

下载vue.js:https://cn.vuejs.org/v2/guide/installation.html

2、CDN

也可以不下载直接使用cdn

https://cdn.jsdelivr.net/npm/vue

3、引用

<script src="vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

4、使用格式

{{}},里面可以放表达式

<div id="app">
    //和django中模版渲染一样使用{{变量}}插入文本
    {{ message }}
</div>

<script>
    //实例化Vue
    var app = new Vue({
        //定位标签    表示在当前这个元素内开始使用VUE
        el: \'#app\',
        //变量
        data: {
            message: \'Hello Vue!\'
        }
    })
<script>

 

二、vue常用指令

指令:是带有V-前缀的特殊属性,通过属性来操作元素

1、v-text,v-html

v-text:可以在元素当中插入值

v-html:元素不中不仅可以插入文本,还可以插入标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p>{{80+2}}</p>
        <p>{{20>30}}</p>
            我是:<h1 v-text="msg">{{str}}</h1>
            你是:<h1 v-text="msg">2222222222222</h1>

            <h2 v-html="hd"></h2>
            <h2 v-html="str"></h2>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                msg: "我是老大",
                hd: "<input type=\'button\' value=\'你是小三\'>",
                str: "我要发财!"
            }
        })
    </script>
</body>
</html>
v-text,v-html

2、v-if,v-show

v-if:根据表达式的真假值来动态插入和移除元素

v-show:根据表达式的真假值来隐藏和显示元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
</head>
<body>
      <div id="app">
       <p v-if="pick">我是刘德华</p>
       <p v-else>我是张学友</p>
       <p v-show="temp">我是赵本山</p>

       <p v-show="ok">你喜欢我吗?</p>

    </div>
    <script>
        var vm = new Vue({
            el: "#app", 
            data:{
                pick: false,
                temp: true,
                ok: true
            }
        })

         window.setInterval(function(){
             vm.ok = !vm.ok;
         },1000)
    </script>
</body>
</html>
v-if,v-html

3、v-for

v-for:根据变量的值来循环渲染元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index2) in arr">
                {{item}}: {{index2}}
            </li>
        </ul>

        <ul>
            <li v-for="(item,key,index) in obj">
                {{item}}: {{key}}:{{index}}
            </li>
        </ul>
            <ul>
                <li v-for="item in obj2">
                    {{item.username}}
                    {{item.age}}
                    {{item.sex}}
                </li>
            </ul>
        <div v-for="i in 8">
            {{i}}
        </div>
    </div>
    <script>
        new Vue({
            el: "#app", 
            data:{
                arr: [11,22,3344,55],
                obj: {a:"张三",b:"李四",c:"王大拿",d:"谢大脚"},
                obj2:[
                    {username: "jason"},
                    {age: 20},
                    {sex: "male"}
                ],
            }
        })
    </script>
</body>
</html>
v-for

4、v-on

1)v-on:监听元素事件,并执行相应的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">
                {{item}}: {{index}}
            </li>
        </ul>

        <input type="button" value="点我吧!" @click="show()">

    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                arr: [11,22,33,44,55],
                ],
            },
        //监听的事件
         methods: {
             show: function () {
                 this.arr.pop();
            }
        }
    })
    </script>
</body>
</html>    
v-on

2)小实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li><input type="checkbox">苹果</li>
            <li><input type="checkbox">香蕉</li>
            <li><input type="checkbox">香梨</li>
            <li><input type="checkbox" v-on:click="create()">其它</li>
            <li v-html="htmlstr" v-show="test"></li>
        </ul>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                test: false,
                htmlstr: "<textarea></textarea>"
            },
            methods: {
                create: function () {
                    this.test = !this.test;
                }
            }
        })
    </script>
</body>
</html>
动态生成html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
            display: inline-block;
            border: 1px solid cornflowerblue;
            height:40px;
            line-height: 40px;
            width: 120px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="mybox">
        <ul>
            <li>
                <span v-on:click="qh(true)">二唯码登录</span>
            </li>
            <li>
                <span v-on:click="qh(false)">邮箱登录</span>
            </li>
        </ul>

        <div v-show="temp">
            <img src="erma.jpg">
        </div>
        <div v-show="!temp">
            <form action="http://mail.163.com" method="post">
                <p><input type="email"></p>
                <p><input type="password"></p>
                <p><input type="submit" value="登录"></p>
            </form>
        </div>
    </div>
    <script>
        new Vue({
            el: "#mybox",
            data: {
                temp: true
            },
            methods: {
                qh: function (t) {
                    this.temp = t
                }
            }
        })
    </script>
</body>
</html>
tag切换

3)v-on简写

//标准书写:
<input type="button" value="点我吧!" v-on:click="show()">
//简写:
<input type="button" value="点我吧!" @click="show()"

以上是关于98vue.js简单入门的主要内容,如果未能解决你的问题,请参考以下文章

vue.js简单入门

Vue.js入门

Vue 基础语法入门(转载)

使用带有渲染功能的 Vue.js 3 片段

第二节:简易安装 和 快速入门Vue.js

Vue.js最简单的代码