1、外部调用变量和函数
(1)通过$data获取
(2)通过实例化就可以获取
<script src="vue.js"></script>
<script>
window.onload=function fun(){
var value={a:1,b:2}
var v=new Vue({
data:value
})
alert(v.$data.a)
alert(v.b)
}
</script>
2、函数
(1)自定义函数
必须放在methods下面
var v=new Vue({
el:"#app",//挂载点
data:{//数据
msg:"helloworld",
url:"http://baidu.com",
h1:"<h1>11111</h1>",
show:true,
student:"学生你好",
leader:"领导你好",
user:"用户你好",
arr:["red","blue","yellow","pink","black"]
},
methods:{
fun:function(){
alert(1111)
}
}
})
(2)过滤器filters
为标签调用变量,执行内容的过滤,放在filters下面进行过滤
(3)计算器
(4)监听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<span>{{msg|fun1}}</span>
<input type="text" v-model="first">
<input type="text" v-model="last">
<h1>{{add}}</h1>
<input type="button" value="加1" @click="count++">
<h1>{{count}}</h1>
</div>
<script>
var vue=new Vue({
el:"#app",
data:{
msg:"11",
first:"你好",
last:"乔安",
count:1
},
// 过滤器
filters:{
fun1:function(v){
return v.toUpperCase()
}
},
// 计算器
computed:{
add:function(){
console.log(this)//Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
return this.first+this.last
}
},
})
// 监听器
vue.$watch("count",function(news,old){
alert("新的值是:"+news+"旧的值是"+old)
})
</script>
</body>
</html>