这一篇就够了"/>
Vue入门:看这一篇就够了
高速通道
- 官网实栗
- vue指令
- v-text: 设置标签的文本值(textContent)
- v-html: 设置标签的innerHTML
- v-on: 为元素绑定事件
- v-show:根据表达式的真假切换元素的显示和隐藏
- v-if:根据表达式真假,切换元素显示与隐藏
- v-bind:设置元素的属性
- v-for:根据数据生成列表结构
- v-model:获取和设置表单元素的值(双向数据绑定)
- 网络请求 axios
- 使用axios进行网络交互案例
- 小叮当任意门:
- 感谢点赞
话不多说,直接开干。
先来个官网实栗吧。
官网实栗
<body><!--第一个vue实栗--><div id="app">{{message}}</div><script src=".js"></script><script>//注意这里构造Vue开头要大写哦,不然会报引用错误var app = new Vue({el:'#app',data:{message:'hello world'}})</script></body>
el挂载点:
1、el是用来设置vue实栗挂载(管理)的元素
2、vue会管理el选项命中的元素及其内部的后代元素
3、可以使用其他的选择器,建议使用ID选择器
4、可以使用其他双标签,除了HTML和BODY
data数据对象:
vue中用到的数据定义在data中
data可以写复杂类型的数据,包括表达式
vue指令
vue指令是指以v-开头的一组特殊语法
v-text: 设置标签的文本值(textContent)
<body><div id="app"><h3 v-text="message">小白</h3><h3 v-text="info">定居在</h3><h3>{{address}}定居</h3></div><script src=".js"></script><script>var app = new Vue({el:'#app',data:{message:'前端程序员',info:'目前',address:'杭州'}})</script>
</body>
v-text指令的作用是设置标签的内容
默认写法会替换全部内容,使用{{}}可以替换指定内容
内部支持表达式
v-html: 设置标签的innerHTML
<body><div id="app"><p v-html="content"&
更多推荐
Vue入门:看这一篇就够了
发布评论