vue学习笔记整理

1、安装

  • 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 script 标签引入
  • 使用 CDN 方法，在script 标签下src="https://cdn.jsdelivr.net/npm/vue@2.6.11"写入
  • NPM，在用 Vue 构建大型应用时推荐使用 NPM 安装，# 最新稳定版
    $ npm install vue

2、创建一个 Vue 实例

var vm = new Vue({
  // 选项
})

3、插值

  • 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
  • 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html
  • 你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
  • Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

4、指令
v-bind:绑定一个值，v-on:绑定一个事件
简写：v-bind ------- : ，v-on ------------- @。

综合例子：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="div">
    <input type="button" value="start"  v-on:click="run"></input>
    <input type="button" value="stop" @click="stop"></input>
    <h1>{{msg4}}</h1>
    <p v-Cloak>--- {{msg}} +++</p>
    <h1 v-text="msg1"></h1>
    <h4 v-html="msg2"></h4>
    <input type="button" value="按钮" v-bind:title="msg3" v-on:click="show">
</div>
<script>
    var vm = new Vue({
        el:'#div',
        data:{
            msg:'Hello world!',
            msg1:'<h1>Best!</h1>',
            msg2:'<h1>Best!</h1>',
            msg3:'This is a Button!',
            msg4:"一直走不停留！",
            intervalId: null,

        },
        methods:{
            show:function () {
                alert("Hello!");
            },
            run(){
                if(this.intervalId==null){
                    this.intervalId = setInterval(()=>{
                        var start = this.msg4.substring(0,1);
                        var end = this.msg4.substring(1);
                        this.msg4 =  end + start;
                    },300)
                }
            },
            stop(){
                clearInterval(this.intervalId);
                this.intervalId=null;
            }
        }
    })
</script>
</body>
</html>

运行截图：
在这里插入图片描述

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue