vue最好的教程 30分钟学会,学不会你打我

前言

Vue是现在很火的一个前端MVVM框架,面向数据的,它是以数据驱动和组件化的思想构建,与langular 和react齐名,就是咱们常说的前端三大框架 .
核心思想就是: ~~ 操作数据 !!!

安装(引用Vue)

直接引入script 就行了,代码如下:

 
 






测试
{{ message }}

点击调用showMsg方法 //点击事件


    选项一
    选项二

//选择事件

效果图

我们在HTML代码里面设置了一个id为’‘app’'的div, 然后在javascript里面实例化了一个属性el为 '#app’的Vue对象, 表示这个Vue对象用来处理该div的显示.
接着在Vue对象的data属性里面设置了一个message字段, 把这个字段和页面的p元素和input元素双向绑定起来
这样只要message字段改变,p元素的内容也会相应的改变. 输入的内容改变 message就会改变 这样p元素也会做出相应的改变;;;是不是很神奇 谨记 v-model这个标签哦~~

vue实例组成

三个部分,也就是最基本的 el属性用来指定绑定的页面容器 data属性用来存放页面展示的数据 methods属性用来放置页面调用的方法 都跟页面有关系,这也是Vue的核心思想,直接操作页面,直接操作数据 …
当然了重点就是
data属性里面的字段如何与页面绑定(数据绑定),
methods属性里面的方法如何与页面交互(事件绑定)

数据绑定

1.文本
span>消息: {{ message }} /span>
2.原始html
span v-html=“htmlCode”> /span>
3.列表
span v-for=“item in list”>{{item}} /span>
4.条件
span v-if=“isHuman”>我是好人 /span>
span v-else>我不是好人 /span
5.属性
a v-bind:href=“url”>这是一个链接 /a>
img :src:href=“imgUrl” alt=“这是一张图片” />
6.表达式
span>1+1=: {{ 1+1 }} /span>

事件绑定

效果如下图:[(

工作中我们经常会用到是这样的

    methods:{
        ...
            
        },
        showChangeMsg:function(){
          $.post('api接口',function(data){
              location.href = this.url
            });
        }
    }
})
好了,暂时先写这么多,我也是在学习中,后期会继续补充...