【VUE2开发20221004】-day1.0

编程语言 2022-10-17 01:04:42 阅读次数: 0

目录

前端开发教程链接
vuejs官方教程
在这里插入图片描述
框架：vue2
编译器：Webstore

测试案例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、引入vue.js文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!--2、指定区域，该区域的内容希望由vue.js来接管-->
<div id="app">
    <h1>Hello Vue.js</h1>
    <div> 我是{
    
    {
    
    name}},QQ:{
    
    {
    
    qq}}</div>
    <input type="button" value="click" v-on:click="clickMe">
</div>

<script>
    <!--3、创建vue对象，并关联HTML区域-->
    var app = new Vue({
    
    
        el: "#app",
        data: {
    
    
            name: 'CodeKnight',
            qq: '2131231'
        },
        methods: {
    
    
            clickMe: function () {
    
    
                this.name = "代码骑士";
                this.qq = "123213";
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

使用cdn：

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

使用vue.js
vue.js下载
ctrl+s保存页面代码到桌面再拷贝到项目文件，然后直接使用
在这里插入图片描述

Vue常见指令：

模板语法

1、插值表达式

一般在显示文本内容的标签中使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、引入vue.js文件-->
    <script src="vue.js"></script>
</head>
<body>
<!--2、指定区域，该区域的内容希望由vue.js来接管-->
<div id="app">
    <h1>Hello Vue.js</h1>
    <div> 姓名：{
    
    {
    
    name}},性别:{
    
    {
    
    sex}},兴趣:{
    
    {
    
    interest}}，邮箱:{
    
    {
    
    email}}</div>
    <ul>
        <li>{
    
    {
    
    '丽丽'}}</li>
        <li>{
    
    {
    
    "丽丽："+'18'}}</li>
        <li>{
    
    {
    
    base+1+1}}</li>
        <li>{
    
    {
    
    1===1?"丽丽":"alex"}}</li><!--三元运算，相当于C语言三目运算符-->
    </ul>
    <ul>
        <li>{
    
    {
    
     condition?"丽丽":"alex" }}</li>
    </ul>
    <input type="button" value="click" v-on:click="clickMe">
</div>

<script>
    <!--3、创建vue对象，并关联HTML区域-->
    var app = new Vue({
    
    
        el: "#app",
        data: {
    
    
            name: 'CodeKnight',
            sex: "男",
            interest: "敲代码",
            dataInfo: {
    
    
                id: 1,
                email: "[email protected]",
            },
            condition: false,
            base: 1
        },
        methods: {
    
    
            clickMe: function () {
    
    
                this.name = "代码骑士";
                this.condition = true;
                this.dataInfo.email = "[email protected]";
                this.base += 100;
            }
        }
    })
</script>
</body>
</html>

2、v-bind指令

一般用于对标签中的属性进行操作。

在项目中添加一张图片
在这里插入图片描述
示例代码1：用v-bind给图片添加一个自定义的css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .ig{
    
    
            border: 10px solid red;
        }
    </style>
</head>

<body>
<div id="app">

    <img alt="" v-bind:src="imgUrl" v-bind:class="cls">

</div>

<script>
    var app = new Vue({
    
    
        el:'#app',
        data:{
    
    
            imgUrl:'t011a27237030b8a9ee.jpg',
            cls:"ig",
        }
    })
</script>
</body>
</html>

可以看到，我们的图片已经绑定了自定义的格式
在这里插入图片描述
示例代码2：用v-bind给标签添加多个属性（只要类型为True就会显示）
与普通写法相比优点是：可以传递参数，方便样式动态修改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .ig {
    
    
            border: 10px solid red;
        }
        .info {
    
    
            color: red;
        }
        .danger {
    
    
            font-size: 100px;
        }
    </style>
</head>

<body>
<div id="app">

    <img alt="" v-bind:src="imgUrl" v-bind:class="cls">

    <p v-bind:class="{info:v1,danger:v2}">你好呀~</p>
</div>

<script>
    var app = new Vue({
    
    
        el:'#app',
        data:{
    
    
            imgUrl:'神仙姐姐.jpg',
            cls:"ig",
            v1:true,
            v2:true,
        }
    })
</script>
</body>
</html>

在这里插入图片描述
也可以对代码进一步简化
在这里插入图片描述
上述是以字典形式读取变量，下面介绍以列表形式读取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .ig {
    
    
            border: 10px solid red;
        }

        .info {
    
    
            color: red;
        }

        .danger {
    
    
            font-size: 100px;
        }
    </style>
</head>

<body>
<div id="app">

    <img alt="" v-bind:src="imgUrl" v-bind:class="cls">

    <p v-bind:class="clsDict">你好呀~</p>
    <p v-bind:class="[a1,a2]">我是FeiFei~</p>

</div>

<script>
    var app = new Vue({
    
    
        el: '#app',
        data: {
    
    
            imgUrl: '神仙姐姐.jpg',
            cls: "ig",
            clsDict: {
    
    
                info: true,
                danger: true,
            },
            a1: "info",
            a2: "danger",
        }
    })
</script>
</body>
</html>

在这里插入图片描述
也可以使用三元运算符调整样式

<p v-bind:class="[1===2?a1:'a',a2]">我是FeiFei~</p>

在这里插入图片描述
除了对class使用bind外，其他属性也可以使用，比如style：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .ig {
    
    
            border: 10px solid red;
        }

        .info {
    
    
            color: red;
        }

        .danger {
    
    
            font-size: 100px;
        }
    </style>
</head>

<body>
<div id="app">

    <img alt="" v-bind:src="imgUrl" v-bind:class="cls">
    <!--一般写法-->
    <p class="danger info ig">Hi~</p>
    <!--bind写法-->
    <p v-bind:class="clsDict">你好呀~</p>
    <p v-bind:class="[1===2?a1:'a',a2]">我是FeiFei~</p>

    <!--一般写法-->
    <p style="color: blue;font-size: 20px">这是我的手机号：********</p>
    <!--bind写法-->
    <p v-bind:style="{color:clr,fontSize: fSize+'px'}">这是我的手机号：********</p>
</div>

<script>
    var app = new Vue({
    
    
        el: '#app',
        data: {
    
    
            imgUrl: '神仙姐姐.jpg',
            cls: "ig",
            clsDict: {
    
    
                info: true,
                danger: true,
            },
            a1: "info",
            a2: "danger",

            clr: "red",
            fftSize: "20",
        }
    })
</script>
</body>
</html>

在这里插入图片描述

所以，当使用bind动态绑定时，只要data中的值发生变化，标签中的属性也会发生改变。

写一个点击按钮进行测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .ig {
    
    
            border: 10px solid red;
        }

        .info {
    
    
            color: red;
        }

        .danger {
    
    
            font-size: 100px;
        }
    </style>
</head>

<body>
<div id="app">

    <img alt="" v-bind:src="imgUrl" v-bind:class="cls">
    <!--一般写法-->
    <p class="danger info ig">Hi~</p>
    <!--bind写法-->
    <p v-bind:class="{info:v1,danger: v2}">hello~</p>
    <p v-bind:class="clsDict">你好呀~</p>
    <p v-bind:class="[a1,a2]">我是FeiFei~</p>

    <!--一般写法-->
    <p style="color: blue;font-size: 20px">这是我的手机号：********</p>
    <!--bind写法-->
    <p v-bind:style="{color:clr,fontSize: fSize+'px'}">这是我的手机号：********</p>

    <input type="button" value="点我" v-on:click="clickMe">

</div>

<script>
    var app = new Vue({
    
    
        el: '#app',
        data: {
    
    
            imgUrl: '神仙姐姐.jpg',
            cls: "ig",
            v1:true,
            v2:true,
            clsDict: {
    
    
                info: true,
                danger: true,
            },
            a1: "info",
            a2: "danger",

            clr: "red",
            fftSize: "20",
        },
        methods:{
    
    
            clickMe:function (){
    
    
                this.v1 = false;
            }
        }
    })
</script>
</body>
</html>

原始
在这里插入图片描述

点击按钮
在这里插入图片描述

v-bind指令注意事项
简写v-bind

简写格式:属性名=xxx，如：
在这里插入图片描述

v-bind属于单向绑定（JS修改->HTML修改）

意思是，只要JS中的变量值发生变化，html中的参数值也会发生变化。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <h1>{
    
    {
    
    txt}}</h1>
    <input type="text" v-bind:value="txt">
</div>
</body>

<script>
    var app = new Vue({
    
    
        el: "#app",
        data: {
    
    
            txt:"代码骑士",
        }
    })
</script>

</html>

在这里插入图片描述
修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <h1>{
    
    {
    
    txt}}</h1>
    <input type="text" v-bind:value="txt">
</div>
</body>

<script>
    var app = new Vue({
    
    
        el: "#app",
        data: {
    
    
            txt:"CodeKnight",
        }
    })
</script>

</html>

在这里插入图片描述
也可以通过按钮来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <h1>{
    
    {
    
    txt}}</h1>
    <input type="text" v-bind:value="txt">

    <input type="button" value="点击" v-on:click="clickMe">
</div>
</body>

<script>
    var app = new Vue({
    
    
        el: "#app",
        data: {
    
    
            txt: "CodeKnight",
        },
        methods: {
    
    
            clickMe:function (){
    
    
                this.txt="代码骑士";
            }
        }
    })

</script>

</html>

在这里插入图片描述
上面的示例，说明只有当js变化时，html中的值才会边，方向是单一的。那么，如果我们想让html中的值变化从而让js中的变量值也跟着变，也就是实现“双向绑定”我们就需要使用关键字v-model。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <h1>{
    
    {
    
    txt}}</h1>
    <input type="text" v-model:value="txt">
</div>
</body>

<script>
    var app = new Vue({
    
    
        el: "#app",
        data: {
    
    
            txt: "CodeKnight",
        }
    })

</script>

</html>

在这里插入图片描述

3、v-model指令

一般用于在交互的表中使用，例如：input、select、textarea等。【双向绑定】
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <div>
        用户名:<input type="text" v-model="user">
    </div>
    <div>
        密码:<input type="text" v-model="pwd">
    </div>
    <input type="button" value="登录" v-on:click="clickMe"/>
    <input type="button" value="重置" v-on:click="clickForm"/>
</div>
</body>

<script>
    var app = new Vue({
    
    
        el: "#app",
        data: {
    
    
            user: "",
            pwd: "",
        },
        methods: {
    
    
            clickMe: function () {
    
    
                console.log(this.user, this.pwd);
            },
            clickForm: function () {
    
    
                this.user = "";
                this.pwd = "";
            }
        }
    })
</script>

</html>

效果：
在这里插入图片描述
点击重置
在这里插入图片描述

v-model常用标签

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <div>
        用户名:<input type="text" v-model="user">
    </div>
    <div>
        密码:<input type="text" v-model="pwd">
    </div>
    <div>
        性别:
        <input type="radio" v-model="sex" value="1">男
        <input type="radio" v-model="sex" value="2">女
    </div>
    <div>
        爱好:
        <input type="checkbox" v-model="hobby" value="11">蓝球
        <input type="checkbox" v-model="hobby" value="22">足球
        <input type="checkbox" v-model="hobby" value="33">排球
    </div>
    <div>
        城市:
        <select v-model="city">
            <option value="sh">上海</option>
            <option value="bj">北京</option>
            <option value="sz">深圳</option>
        </select>
    </div>
    <div>
        擅长领域:
        <select v-model="company" multiple>
            <option value="11">技术</option>
            <option value="22">销售</option>
            <option value="33">运营</option>
        </select>
    </div>
    <div>
        其他:<textarea v-model="more"></textarea>
    </div>

    <input type="button" value="注册" v-on:click="clickMe"/>
</div>
</body>

<script>
    var app = new Vue({
    
    
        el: "#app",
        data: {
    
    
            user: "",
            pwd: "",
            sex: "2",
            hobby: ["22"],
            city: "sz",
            company: ["22", "33"],
            more: '...',
        },
        methods: {
    
    
            clickMe: function () {
    
    
                console.log(this.user, this.pwd, this.sex, this.hobby, this.city, this.company, this.more);
            },
        }
    })
</script>

</html>

在这里插入图片描述
也可以将所有变量值放在一个字典里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <div>
        用户名:<input type="text" v-model="info.user">
    </div>
    <div>
        密码:<input type="text" v-model="info.pwd">
    </div>
    <div>
        性别:
        <input type="radio" v-model="info.sex" value="1">男
        <input type="radio" v-model="info.sex" value="2">女
    </div>
    <div>
        爱好:
        <input type="checkbox" v-model="info.hobby" value="11">蓝球
        <input type="checkbox" v-model="info.hobby" value="22">足球
        <input type="checkbox" v-model="info.hobby" value="33">排球
    </div>
    <div>
        城市:
        <select v-model="info.city">
            <option value="sh">上海</option>
            <option value="bj">北京</option>
            <option value="sz">深圳</option>
        </select>
    </div>
    <div>
        擅长领域:
        <select v-model="info.company" multiple>
            <option value="11">技术</option>
            <option value="22">销售</option>
            <option value="33">运营</option>
        </select>
    </div>
    <div>
        其他:<textarea v-model="info.more"></textarea>
    </div>

    <input type="button" value="注册" v-on:click="clickMe"/>
</div>
</body>

<script>
    var app = new Vue({
    
    
        el: "#app",
        data: {
    
    
            info: {
    
    
                user: "",
                pwd: "",
                sex: "2",
                hobby: ["22"],
                city: "sz",
                company: ["22", "33"],
                more: '...',
            }
        },
        methods: {
    
    
            clickMe: function () {
    
    
                console.log(this.info);
            },
        }
    })
</script>

</html>

这样就可以直接输出一个字典
在这里插入图片描述

4、v-for指令

用户数据进行循环展示。
代码示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in dataList">{
    
    {
    
     item }}</li>
        </ul>
    </div>
</body>

<script>
    var app = new Vue({
    
    
        el: '#app',
        data: {
    
    
            dataList: ["小明", "小囧", "朵拉"],
        }
    })
</script>
</html>

输出
在这里插入图片描述

代码示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,idx) in dataList">{
    
    {
    
     idx }}-{
    
    {
    
     item }}</li>
        </ul>
    </div>
</body>

<script>
    var app = new Vue({
    
    
        el: '#app',
        data: {
    
    
            dataList: ["小明", "小囧", "朵拉"],
        }
    })
</script>
</html>

在这里插入图片描述
代码示例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(value,key) in dataDict">{
    
    {
    
     key }}-{
    
    {
    
     value }}</li>
        </ul>
    </div>
</body>

<script>
    var app = new Vue({
    
    
        el: '#app',
        data: {
    
    
            dataDict: {
    
    
                id:1,
                age:18,
                name:"小鸟",
            }
        }
    })
</script>
</html>

输出
在这里插入图片描述
代码示例4：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,idx) in cityList">{
    
    {
    
     item.id }}-{
    
    {
    
     item.text }}</li>
        </ul>
    </div>
</body>

<script>
    var app = new Vue({
    
    
        el: '#app',
        data: {
    
    
            cityList:[
                {
    
    id:1,text:"上海"},
                {
    
    id:2,text:"北京"},
                {
    
    id:3,text:"广州"},
            ]
        }
    })
</script>
</html>

输出
在这里插入图片描述
代码示例5：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,idx) in cityList">
                <span v-for="(v,k) in item">{
    
    {
    
     k }}-{
    
    {
    
     v }}</span>
            </li>
        </ul>
    </div>
</body>

<script>
    var app = new Vue({
    
    
        el: '#app',
        data: {
    
    
            cityList:[
                {
    
    id:1,text:"上海"},
                {
    
    id:2,text:"北京"},
                {
    
    id:3,text:"广州"},
            ]
        }
    })
</script>
</html>

输出

在这里插入图片描述

5、v-on事件

在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <ul>
        <li v-on:click="clickMe">点击</li>
        <li v-on:dblclick="doSomething('双击')">双击</li>
        <li v-on:mouseover="doSomething('进入')" v-on:mouseout="doSomething('离开')">进入&离开</li>
    </ul>
</div>
</body>

<script>
    var app = new Vue({
    
    
        el: '#app',
        data: {
    
    },
        methods:{
    
    
            clickMe:function (){
    
    
                alert("点击了")
            },
            doSomething:function (msg){
    
    
                console.log(msg)
            }
        }
    })
</script>
</html>

输出
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_51701007/article/details/127166579
今日推荐
周排行
Access的四舍五入取整
8.23 前端学习过程
入门学习过程方向与漏洞复现总结：
操作分布式文件之八：如何批量并行读写远程文件和事务补偿处理
应邀出个教程 （搭建tensorflow跑网络环境）
Kubernetes之Pod控制器应用进阶
14-[mysql内置功能]--
HDU6212 区间dp 好题
VS2015生成代码图
验证手机号的工具类
每日归档
更多
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)
2024-10-12(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022