<script>
let vue = new Vue({
el: '#app',
data: {
mag:'helloVue',
msg:'HelloVue'
},
methods: {
stop:function () {
}
}
});
</script>
v-cloak: 在style中设置为none,在用户访问网速很慢时,可以看不到花括号。
v-text和{{}}:都可以把变量渲染到页面中,前者是在容器标签内使用v-text=‘’msg‘’ ,标签内的值会被替换掉,后者可以直接在两个花括号前或者后加入其他文字
v-html:会解析html标签
v-blind:简写成: ,在标签属性前加这个,表示这个属性的值是一个变量,会在vue对象去找这个变量对应的值
v-on:简写成@ ,会在事件前加入这个属性,属性值对应vue里面的函数名
箭头函数 : 使函数两边的this作用对象不改变。
定时器:setInterval()
字符串分割:substring(从这里开始,从这里结束) 左闭又开
1、$("#form").serialize() 将表单值序列化为字符串 , 如 username=admin&password=123
2、$("#form").serializeObject() 将表单序列化为一个json对象 , 如 {username:admin,password:123}
3、$("#form").serializeArray() 将表单序列化为一个数组 , 如 [ {username:admin,password:123}, {username:admin,password:123} ]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<h3 v-text="msg">HelloWorld</h3>
<p>HelloWorld{{mag}}hello</p>
<hr>
<p v-html="h"></p>
<p v-text="h"></p>
<!-- v-bind也可以简写为:-->
<button v-bind:title="title" v-on:click="run">浪起来</button>
<button :title="title" @click="stop">停止</button>
<h3 v-text="msg">HelloWorld</h3>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
mag:'helloVue',
msg:'HelloVue',
h:'<h1>这是一个html标签</h1>',
title:'这是一个自定义的按钮',
interval:null
},
methods: {
stop:function () {
console.log("123")
clearInterval(this.interval);
this.interval = null;
},
run(){
if (this.interval != null) return;
this.interval = setInterval( () => {
let star = this.msg.substring(0,1);
let end = this.msg.substring(1);
this.msg = end + star;
},400);
}
}
});
</script>
</body>
</html>