Js学习笔记（二）之总结加代码-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43800071/article/details/87129338

本文详细介绍Vue.js中的核心概念，包括v-html的使用及其安全性问题，v-if与v-show的区别，事件绑定v-on的多种用法，以及v-bind的属性绑定实践。通过具体的代码示例，帮助读者理解并掌握Vue的基本语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

函数:v-html=“xxx”
输入内容，可以解释成html语言,缺点很明显:容易被黑客XSS攻击

函数:v-if=“seeable”,v-show=“seeable”
当seeable==null,undefind,’'等,将不可视,否则可视
v-if 不可视的时候该元素不可以在f12看到（删除）
v-show则可以(保留)

函数:v-on:click v-on={‘事件’:‘绑定的函数’} 缩写@
绑定事件 …==<a @:click=‘onmouseenter’>…
或者 <a v-on={{click:‘onclick’}} 该 onclick的方法写在methods里

函数:v-bind
绑定属性
目前练习的test.html

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
<div id="app">
    <form v-on:submit.prevent="onsubmit()" v-on:keyup="onkeyup">
           <!--<form v-on:submit.prevent="onsubmit($event)">-->
    <input type="text">
        <button type="submit">提交</button>
    </form>
    <li v-if="seeable">这是一个测试</li>
    <button v-on="{mouseenter:onenter,mouseleave:onleave}" @click="onclicks">click</button>
<ul>
        <li v-for="food in foodlist">{{food.name}}:￥{{food.discount?food.price*food.discount:food.discount}}</li>
</ul>
 <a :href="urls">百度一下</a>
</div>

</div>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

下面是main.js

var app= new Vue({
    el: '#app',

    methods:{
      onenter: function () {console.log('onenter')

      ;},
      onleave:function () {console.log('onleave')
      },
        onclicks:function () {console.log('onclick')

        },
        onsubmit:function () {
          // e.preventDefault();
          console.log('onsubmited')

        }  ,
        onkeyup:function () {
          // e.preventDefault();
          console.log('keyup')

        }
    },
    data: {
        urls:'https://www.baidu.com',
        seeable:undefined,
    foodlist:[
        {
            name:'牛肉面',
            price:14,
            discount:.3
        },
        {
            name:'泡面',
            price:33,
            discount:.5
        },
        {
            name:'米粉',
            price:11,

        }
        ]
    },

});

下面是vue.js 网址在Js学习笔记（二)那里有，直接copy的小伙伴记得修改下html 的Js路径哦
…