Vue2 学习~

最新推荐文章于 2024-07-19 14:16:29 发布

qq_37623020

最新推荐文章于 2024-07-19 14:16:29 发布

阅读量23

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_37623020/article/details/130399690

版权

初识vue

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        //创建vue实例
        new Vue({
            el: '#root',
            data: {
                name: 'zhangsan123'
            }
        })
    </script>
</body>

</html>

想让vue工作,就必须创建一个vue实例,且要传入一个配置对象

root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法

root容器里的代码被称为vue模板

注意区分:js表达式和js代码(语句)

1.表达式:一个表达式会生成一个值,可以放在任何一个需要值的地方:

1) a

2) a+b

3) demo(1)

4) x ===y ? 'a' : 'b'

2. js代码(语句)

1) if(){}

2) for(){}

模板语法

Vue模板语法有2大类:
1.插值语法:
功能:用于解析标签体内容写法 :{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签 (包括: 标签属性、标签体内容、绑定事件.....举例:v-bind:href="xxx”或简写为:href="xxx"xxx同样要写js表达式，且可以直接读取到data中的所有属性。

备注:Vue中有很多的指令，且形式都是:v-????，此处我们只是拿v-bind举个例子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>

</head>

<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr />
        <h1>
            指令语法
        </h1>
        <a v-bind:href="url">点我百度</a>
        <a :href="url" x="hello">点我百度</a>
    </div>

    <div id="root2">
        <h1>你好,{{name}}</h1>
    </div>

    <script type="text/javascript">

        new Vue({
            el: '#root',
            data: {
                name: '张三',
                url: 'http://www.baidu.com'
            }
        })

        new Vue({
            el: '#root2',
            data: {
                name: '张三',
                name: '李四'
            }
        })


    </script>
</body>

</html>

数据绑定

单向数据绑定:v-bind: 简写 :value=""

双向数据绑定:v-model 简写 v-model=""

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>
</head>

<body>
    <div id="root">
        单向数据绑定:<input type="text" v-bind:value="name">
        <hr />
        <!--v-model只能用于表单类元素(输入类元素)-->
        双向数据绑定:<input type="text" v-model:value="name">
        <!-- 双向数据绑定简写:<input type="text" v-model="name"> -->
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: '张三'
            }
        })
    </script>
</body>

</html>

数据代理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>

</head>

<body>
    <div id="root">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>

    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '张三',
                address: '123'
            }
        })
    </script>
</body>

</html>

事件处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>

</head>

<body>
    <div id="root">
        <h2>欢迎{{name}}来学习</h2>
        <!-- <button v-on:click="showInfo">点我提示信息</button> -->
        <button @click="showInfo">点我提示信息</button>
        <button @click="showInfo1">点我提示信息1</button>
        <button @click="showInfo2($event,66)">点我提示信息2</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: '123'
            },
            methods: {
                showInfo() {
                    alert('同学你好')
                },
                showInfo1(event) {
                    alert('同学你好!')
                },
                showInfo2(event, number) {
                    // alert('同学你好2')
                    console.log(event, number)
                }
            }


        })

    </script>
</body>

</html>

qq_37623020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2 学习~

想让vue工作,就必须创建一个vue实例,且要传入一个配置对象root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法root容器里的代码被称为vue模板注意区分:js表达式和js代码(语句)1.表达式:一个表达式会生成一个值,可以放在任何一个需要值的地方:1) a2) a+b3) demo(1)4) x ===y?'a' : 'b'2. js代码(语句)1) if(){}2) for(){}
复制链接

扫一扫