vue学习：xmg vue学习笔记1/14代码案例

最新推荐文章于 2024-04-04 09:51:36 发布

南北极之间

最新推荐文章于 2024-04-04 09:51:36 发布

阅读量527

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_22182989/article/details/93870262

版权

前端开发专栏收录该内容

563 篇文章 50 订阅

订阅专栏

ppt笔记参考：https://blog.csdn.net/qq_22182989/article/details/94393963

****************************

官网：下载vuejs：

https://cn.vuejs.org/v2/guide/installation.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>

<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>
<p>------------------------------</p>
<h2>下面这个div没有交给vue实例管理。所以无法显示数据</h2>
<div>{{message}}</div>

<script src="../../js/tool/vue.js"></script>
<script>
    // let(变量)/const(常量)
    // 编程范式: 声明式编程
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message: '你好啊,李银河!',
            name: 'coderwhy'
        }
    })

    // 元素js的做法(编程范式: 命令式编程)
    // 1.创建div元素,设置id属性

    // 2.定义一个变量叫message

    // 3.将message变量放在前面的div元素中显示

    // 4.修改message的数据: 今天天气不错!

    // 5.将修改后的数据再次替换到div元素
</script>
</body>
</html>

效果：

********************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue列表展示</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
        }
    })
</script>
</body>
</html>

追加

*********************

计数器案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <h2>当前计数：{{counter}}</h2>
    <!--    如果简单的话：-->
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
    <!--    如果复杂的话：-->
    <button v-on:click="add">复杂的，设置methods看console+</button>
    <button v-on:click="sub">复杂的，设置methods看console-</button>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        }, methods:{
            add: function () {
                console.log('add被执行了')
                this.counter++
            },
            sub: function () {
                console.log('sub被执行了')
                this.counter--
            }
        }
    })
</script>
</body>
</html>

***************

还可以简写：

**********************

设置vue模板，设置成功后，输入vue+tab就出来了

<div id="app">{{message}}</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！yukky！'
        }
    })
</script>

****************

mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}},yukky!</h2>
    <!--    mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
    <h3>{{firstName + lastName}}</h3>
    <h3>{{firstName + ' ' + lastName}}</h3>
    <h3>{{firstName}} {{lastName}}</h3>
    <h3>{{counter * 2}}</h3>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！yukky！',
            firstName: 'Zhou',
            lastName: 'JAY',
            counter: 100
        }
    })
</script>
</body>
</html>

******************

v-bind动态绑定

：语法糖


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!-- 错误的做法: 这里不可以使用mustache语法-->
  <!--<img src="{{imgURL}}" alt="">-->
  <!-- 正确的做法: 使用v-bind指令 -->
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>
  <!--<h2>{{}}</h2>-->

  <!--语法糖的写法-->
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
      aHref: 'http://www.baidu.com'
    }
  })
</script>

</body>
</html>

*******************************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！yukky！'
        }
    })
</script>
</body>
</html>

前：

后：

*************************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
</head>
<body>
<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！yukky！',
            url: '<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>
</body>
</html>

*************************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
</head>
<body>
<div id="app">
    <h2>{{message}}，啦啦啦♪(^∇^*)!</h2>
    <!--    下面的内容被覆盖了-->
    <h2 v-text="message">，啦啦啦♪(^∇^*)!</h2>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！'
        }
    })
</script>
</body>
</html>

*************************************************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-pre</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <!--    跳过这个元素和它的子元素的编译过程。-->
    <!--    可以用来显示原始 Mustache 标签。-->
    <!--    跳过大量没有指令的节点会加快编译。-->
    <h2 v-pre>{{message}}</h2>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！yukky！'
        }
    })
</script>
</body>
</html>

************************

v-cloak

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <h2>{{message}}</h2>
    <!--    这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。-->
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    setTimeout(function () {
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊！yukky！'
            }
        })
    }, 5000)
</script>
</body>
</html>

刚开始：

5秒后：没了

*******************

对象语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    <h2 class="active">{{message}}</h2>-->
    <!--    <h2 :class="active">{{message}}</h2>-->
    <!--    对象语法-->
    <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
    <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
    <button v-on:click="btnClick">按钮</button>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！yukky！',
            isActive: true,
            isLine: true
        }, methods: {
            btnClick: function () {
                this.isActive = !this.isActive
            },
            getClasses: function () {
                return {active: this.isActive, line: this.isLine}
            }
        }
    })
</script>
</body>
</html>

************************

数组语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div id="app">
    <h2 class="title" :class="[active,line]">{{message}}</h2>
    <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！yukky！',
            active: 'aaaaa',
            line: 'bbbbbb'
        },
        methods: {
            getClasses: function () {
                return [this.active, this.line]
            }
        }
    })
</script>
</body>
</html>

***************************

对象语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div id="app">
    <h2 :style="{fontSize:finalSize + 'px',backgroundColor:finalColor}">{{message}}</h2>
    <h2 :style="getStyle()">{{message}}</h2>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！yukky！',
            finalSize: 100,
            finalColor: 'red'
        },
        methods: {
            getStyle: function () {
                return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
            }
        }
    })
</script>
</body>
</html>

*******************

数组语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div id="app">
    <h2 :style="[baseStyle1,baseStyle2]">{{message}}</h2>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊！yukky！',
            baseStyle1: {backgroundColor: 'pink'},
            baseStyle2: {fontSize: '100px'}
        }
    })
</script>
</body>
</html>

***********************************

南北极之间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue学习：xmg vue学习笔记1/14代码案例

ppt笔记参考：https://blog.csdn.net/qq_22182989/article/details/94393963****************************官网：下载vuejs：https://cn.vuejs.org/v2/guide/installation.html<!DOCTYPE html><html lan...
复制链接

扫一扫