Vue—new Vue（）
当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。
1.new Vue()创建一个新的 Vue 实例
2.el挂在原色
el绑定的元素内，都是Vue的作用范围
3.data数据对象
当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- data中绑定 -->
<h1>count: <input v-model="count"></input></h1><br/>
<!-- filters使用 -->
<!-- {{ count | format(2) }}
特别注意：
1.方法format默认第一个参数是count，且省略
2是第二个参数
-->
<h1>count: {{ count | format(2) }}</h1><br/>
<!-- methods使用 -->
<button @click="textalter" >alter</button><br/>
<!-- computed中getter -->
<div>computed中getter</div><br/>
<h1>countPlus: <span>{{countPlus}}</span></h1><br/>
<!-- computed中setter -->
<div>computed中setter</div><br/>
<button @click="add(1)" >add</button><br/>
<h1>countPlus: <span>{{countPlus}}</span></h1><br/>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data:{
count:1,
},
//方法
methods:{
textalter:function(){
alert(this.count);
},
add:function(v){
this.countPlus = this.countPlus + v;
},
},
//过滤器
filters:{
format: function (a,n) {
debugger;
return a + "--" + n
}
},
//钩子函数，钩子函数在Vue创建实例时调用
mounted:function(){
alert(this.count);
},
//计算属性: 所有getter和setter的this上下文自动地绑定为Vue实例
computed:{
countPlus:{
get:function(){
return this.count + 1
},
set:function(value){
this.count = value - 1
}
},
},
//侦听属性,观察和响应 Vue 实例上的数据变动
watch:{
//侦听:count
count: function (val) {
alert(this.count);
},
}
})
</script>
本文标题：Vue—new Vue（）
文章内容来源于网络，文章表达观点不代表本站观点，文章版权归原作者所有。若有侵权，请联系本站站长处理！
我们立足合肥，业务覆盖安徽、全国及全球市场。我们凭借一支经验丰富、富有创意、协作无间的专业技术团队，专注于将前沿技术通过高效简捷的途径呈现给客户，量身打造优质解决方案。我们致力于通过持续努力，成为客户在信息化领域值得托付、共创价值的长期战略合作伙伴，协助客户在新经济时代敏锐捕捉商机，拓展发展空间，构筑强大竞争力。小二CMS专注企业数字化转型的智能建站与营销系统，提供从官网搭建、品牌推广到运营增长的一站式服务，助力中小企业低门槛拥有专业级互联网阵地。
了解全部业务
这篇文章对你有帮助吗？
你的每一次鼓励，都是我们持续打磨优质内容的动力
登录后方可参与评论
立即登录