目录:
Vue入门学习笔记:TodoList(一):HelloWorld
Vue入门学习笔记:TodoList(二):挂载点、模板、实例
Vue入门学习笔记:TodoList(三):实例中的数据、事件和方法
Vue入门学习笔记:TodoList(四):属性绑定和双向数据绑定
Vue入门学习笔记:TodoList(五):计算属性和侦听器
Vue入门学习笔记:TodoList(六):v-if, v-show, v-for指令
Vue入门学习笔记:TodoList(七):todolist功能开发
Vue入门学习笔记:TodoList(八):todolist组件拆分
Vue入门学习笔记:TodoList(九):组件与实例的关系
Vue入门学习笔记:TodoList(十):实现todolist的删除功能
Vue入门学习笔记:TodoList(十一):vue-cli的简介与使用
Vue入门学习笔记:TodoList(十二):使用vue-cli开发todolist
Vue入门学习笔记:TodoList(十三):全局样式与局部样式
知识点
1.数据:插值表达式、v-text
、v-html
2.事件@
等价于v-on
3.方法 methods
一、数据
<div id="root">
{{msg}}
</div>
两个花括号的语法,叫做插值表达式。
还可以写成v-text
或v-html
,v-text
或v-html
是vue的一个指令。
区别:v-html
不会被转义,v-text
会被转义。
使用v-text
显示hello:
<body>
<div id="root">
<div v-text="content">
</div>
</div>
<script>
new Vue(
{
el: "#root", //挂载点就是上面id = root的标签
data: {
content: "<h1>hello</h1>"
}
}
)
</script>
</body>
换成v-html
之后效果如下:
二、事件和方法
v-on模板指令可以绑定事件
方法写在methods
this.content可以修改data中的content
语法糖 @
相当于 v-on
<body>
<div id="root">
<div @click="funcClick">
<div v-text="content"></div>
</div>
</div>
<script>
new Vue(
{
el: "#root",
data: {
content: "hello"
},
methods:{
funcClick: function(){
this.content = "world"
}
}
}
)
</script>
</body>
示例效果:鼠标点击hello,自动替换成world
此为面向数据编程,数据变化则页面内容发生变化
参考资料:https://www.imooc.com/learn/980