声明式渲染
vue的引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
初步使用vue
{ {message}}
错误笔记:1.new Vue中的V忘记大写,2.el的#app忘了加引号以及忘了在末尾加逗号
v-bind
指令
鼠标悬停几秒钟查看此处动态绑定的提示信息!
v-bind
特性被称为指令。指令带有前缀 v-
,以表示它们是 Vue 提供的特殊特性。在这里,该指令的意思是:“将这个元素节点的 title
特性和 Vue 实例的 message
属性保持一致”。
条件与循环
v-if
seen为false时就会消失
v-for
{
{todo.text}}
"{
{}}"中就是想要显示Vue实例中属性提供的内容处理用户输入
为了让用户和你的应用进行交互,我们可以用 v-on
指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法:
v-on
{
{message}}
Vue 还提供了 v-model
指令,它能轻松实现表单输入和应用状态之间的双向绑定。
v-model
{
{message}}
当修改input
中的内容时,标签p
中的message在页面上显示的文字也跟着改变。