史上最简单的Vue入门教程,Vue基础语法

Vue简介:

 

史上最简单的Vue入门教程,Vue基础语法_第1张图片

史上最简单的Vue入门教程,Vue基础语法_第2张图片

史上最简单的Vue入门教程,Vue基础语法_第3张图片

IDEA中安装vue插件

史上最简单的Vue入门教程,Vue基础语法_第4张图片

 demo.html(cdn引入vue.js)




    
    Title



        
{{message}}
鼠标悬浮查看效果

Yes

No

  • {{item.msg}}--{{index}}
  • 效果:

    史上最简单的Vue入门教程,Vue基础语法_第5张图片 史上最简单的Vue入门教程,Vue基础语法_第6张图片

     数据绑定:{{}}和data中的数据绑定

    史上最简单的Vue入门教程,Vue基础语法_第7张图片

     v-bind指令,也可以绑定数据

    史上最简单的Vue入门教程,Vue基础语法_第8张图片

    史上最简单的Vue入门教程,Vue基础语法_第9张图片

    史上最简单的Vue入门教程,Vue基础语法_第10张图片

    v-bind可缩写为:

    史上最简单的Vue入门教程,Vue基础语法_第11张图片

    v-if和v-else指令

    史上最简单的Vue入门教程,Vue基础语法_第12张图片

     史上最简单的Vue入门教程,Vue基础语法_第13张图片

     v-for指令

    史上最简单的Vue入门教程,Vue基础语法_第14张图片

    史上最简单的Vue入门教程,Vue基础语法_第15张图片

    v-on指令: 绑定事件

    史上最简单的Vue入门教程,Vue基础语法_第16张图片

     史上最简单的Vue入门教程,Vue基础语法_第17张图片

    你可能感兴趣的:(前端,JavaScript,Vue,学习,vue.js)