美文网首页
Vue学习第一课

Vue学习第一课

作者: 伙伴崩溃 | 来源:发表于2019-03-12 10:35 被阅读0次

1:在项目中引入Vue

通过静态cdn的方式引入:<script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>

文件来源:bootcdn前端资源库

2:添加绑定

在视图<div class="vue" ></div>; 在vue模板中,通过el:'vue'。绑定对应的div 视图;

注意事项:Vue模板内容,仅仅对绑定的div 及其子视图生效;

3:常用指令

1:显示msg内容:{{msg}};

2:显示一段html文本:v-html ='html';

3:绑定链接:v-bind:href="url" 或者简写: :href="url";

4:绑定id:v-bind:id="id" 或者简写: :id="id";

5:绑定点击事件:v-on:click="buttonClick()" 或者简写:  @click="buttonClick()";

4:数据监听

1:watch 监听器,监听数据的变化,应用场景:异步数据;

2:computed 计算属性,内部包裹任意数据变化,引起响应,应用场景:数据联动;

相关文章

网友评论

      本文标题:Vue学习第一课

      本文链接:https://www.haomeiwen.com/subject/qihgpqtx.html