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

前言

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

安装(引用Vue)

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

 <html xmlns:v-on="http://www.w3.org/1999/xhtml">
 <head>
<meta charset="utf-8">
<title>Vue学习</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>测试</p>
<p>{{ message }}</p>
<input  v-model="message">
<button type="button" v-on:click="showMsg" >点击调用showMsg方法</button> //点击事件

<select v-on:change="showChangeMsg" >
    <option value="1">选项一</option>
    <option value="2">选项二</option>
</select>
//选择事件

</div>

<script>
new Vue({
    el:'#app',
    data:{
        message:'hello',
        url:'www.baodu.com'
    },
    methods:{
        showMsg:function(){
                alert(this.message)
        },
        jumpUrl:function(){
            location.href = this.url
        },
        showChangeMsg:function(){
            alert('改变选择')
        }
    }
})
 </script>
</body>
</html>

效果图
vue最好的教程 30分钟学会,学不会你打我
我们在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>

事件绑定

效果如下图:[(
vue最好的教程 30分钟学会,学不会你打我

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

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