脚本宝典收集整理的这篇文章主要介绍了Vue学习笔记2，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
vue的引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
初步使用vue
<div id="app">
{{message}}
</div>
<script>
var app=new Vue({
el: '#app',
data:{
message:"hello vue"
}
})
</script>错误笔记：1.new Vue中的V忘记大写，2.el的#app忘了加引号以及忘了在末尾加逗号
v-bind指令
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script>
var app2=new Vue({
el: '#app',
data:{
message: 'v-bind特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。'
}
})
</script>v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
<div id="app">
<p v-if="seen">seen为false时就会消失</p>
</div>
<script>
var app2=new Vue({
el: '#app',
data:{
seen: true
}
})
</script>v-for
<div id="app">
<p v-for="todo in todos">{{todo.text}}</p>
</div>
<script>
var app2=new Vue({
el: '#app',
data:{
todos:[
{text:'学习JavaScript'},
{text:'学习Vue'},
{text:'整个牛项目'}
]
}
})
</script>"{{}}"中就是想要显示vue实例中属性提供的内容
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：v-on
<div id="app">
<p>{{message}}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
var app2=new Vue({
el: '#app',
data:{
message:'hello v-on'
},
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join('')
}
}
})
</script>Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。v-model
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
var app2=new Vue({
el: '#app',
data:{
message:'hello v-model'
}
})
</script>当修改input中的内容时，标签p中的message在页面上显示的文字也跟着改变。
以上是脚本宝典为你收集整理的Vue学习笔记2全部内容，希望文章能够帮你解决Vue学习笔记2所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。