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>
运行截图: