出售域名 11365.com.cn
有需要请联系 16826375@qq.com
在手机上浏览
在手机上浏览

Vue简明教程

发布日期:2019-04-16

Vue 读作 view。
Vue是什么?Vue是一套很强大的前端框架,可以进行复杂的逻辑操作。更详细的可以去中文网站(https://cn.vuejs.org/v2/guide/syntax.html)了解下。
要使用vue,首先要引用vue.js。可以从官网下载或者直接引用线上地址。
如:<script src="https://unpkg.com/vue/dist/vue.js"></script>。

 

一、插值
任何语言,都喜欢用"Hello World!"来向世界问好。vue也可以。

<form>
    <p>{{message}}</p>
</form>
<script>
new Vue({
    el: "form",
    data: {
        message: "Hello World!"
    }
});
</script>

看看Vue实例的构造,new表示新建一个实例,el是element的缩写,指向标签、元素。data是数据、值。
Vue实例可以写多个,如果值相同的情况下,只有第一个实例起作用。
Vue并不是一种语言,所以message也不是变量。{{message}}写到标签里面作为属性就不会解析成“Hello World!”。
<p id="app" rel="{{message}}">{{message}}</p> 是错误的。
 
那在标签的属性要显示值要怎么办?那就要用到绑定 v-bind。

 

二、绑定
直接写成<p id="app"v-bind:rel="{{message}}">{{message}}</p>行吗?原来我也是这样想的,觉得框架会直接用值来替换带有{{}}标识的字符串。实际上这样写是错误的。应该写成

<p id="app" v-bind:rel="message">{{message}}</p>

提示:v-bind绑定可以简写成<p id="app" :rel="message">{{message}}</p>

Vue使用v-show来指定标签的隐藏/显示。

<p id="app" :rel="message" v-show=”false”>{{message}}</p>

Vue还可以绑定样式,改变页面效果。看个完整的例子:

<html>
<head>
    <title>绑定样式</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        .kuang {
            border: 1px solid #ccc;
            padding: 20px 10px;
        }
        .greenBg {
            color: white;
            background: green;
        }
        .blueBg {
            color: white;
            background: blue;
        }
    </style>
</head>
<body>
    <form>
        <input type="checkbox" v-model="changeBg" />点我改变背景
        <pre :class="changeBg?greenKuang:blueKuang">{{htmlText}} {{message}}</pre>
    </form>
</body>
</html>

<script>
new Vue({
 el:"form",
 data:{
     message: "\r\n绑定样式可能最有用的就是动态改变样式吧",
     htmlText: "<input type=\"checkbox\" v-model=\"changeBg\" />点我改变背景\r\n<pre :class=\"" + "changeBg?greenKuang:blueKuang\"" + ">{{message}}</pre>",
     greenKuang: "kuang greenBg",
     blueKuang: "kuang blueBg",
     changeBg: false,
     objClass: {}
 }
});
</script>

 

三、事件
可能我们用的最多的就是点击事件,订单提交、留言提交、发表文章都是点击按钮进行提交。Vue的事件使用指令v-on,如v-on:click监听点击事件(可以缩写为@click)。

<form>
<input type="button" v-on:click="counter++" :value="counter">
</form>
<script>
new Vue({
 el:"form",
 data:{
  counter:1
 }
});
</script>

当点击按钮的时候,值会加1并即时显示。当事件需要进行复杂的处理时,可以使用原生的js函数。也可以在Vue中写方法。

<form>
<input type="button" @click="showMeTheMoney(1000)" :value="counter">
</form>
<script>
new Vue({
 el:"form",
 data:{
  counter:1
 },
 methods:{
  showMeTheMoney:function(num){
   alert("give you "+num);
  }
 }
});
</script>

关于键盘事件

<input type="button" @keyup.enter="counter++" :value="counter">

当按回车键时,计数器加1。至于其它键盘按压事件可以自行查阅。

 

四、流程
传统的前端无法直接在标签中写逻辑,一般都是用js计算并在标签中显示结果。而Vue有条件和遍历两种流程控制语句。
If/if-else/if-else-if-else/v-for

条件判断

<p v-if="false">不会显示</p>
<hr v-if="true"/>
<div v-if="1==0">div不会显示</div>
<p v-else>p会显示</p>

可以看到,条件判断还是很灵活的。

遍历循环
遍历的对象一般是JSON对象,可以是一组数据或者对象。我们常常异步读取数据并遍历显示在页面。

<form>
    <ul>
        <li v-for="item in pros">
            产品:{{item.name}} 价格:${{item.price}}
        </li>
    </ul>
    当前用户:<br/>
    用户名:{{user.名称}}<br/>
    年龄:{{user.性别}}<br/>
    地址:{{user.地址}}<br/>
    <hr/>
    <p v-for="(value,key,index) in user">
        {{++index}} {{key}}:{{value}}
    </p>
</form>
<script>
new Vue({
 el:"form",
 data:{
  pros:[
      {"name":"小米电视","price":1799},
      {"name":"奥克斯空调","price":2599},
      {"name":"苹果手机","price":6480}
      ],
  user:{"名称":"张三","性别":"男","地址":"深圳市龙华民治"}
 }
});
</script>

运行结果:


 
五、ajax

Vue本身不提供异步操作,但可以从扩展或者第三方提供的方法进行调用。我习惯用Jquery来读取异步数据。

<form>
<ul>
    <li v-for="item in news">
        标题:{{item.Title}} -日期:{{item.PublishDate}}
    </li>
</ul>
</form>

<script>
    var vm=new Vue({
        el: "form",
        data: {
            news: {}
        }
    });
    $(function () {
        $.getJSON("http://www.ue.net.cn/api/uenews.json", function (jsonVal) {
            vm.news = jsonVal
        })
    })
</script>

异步读取数据,并给Vue的实例赋值。虽然是异步,但是Vue照样正常显示出来了,应该和双向绑定的道理相同。

 

六、组件
组件可以理解为自定义的标签,或者说是扩展的标签。在C#中叫自定义控制,或者partial视图。似乎语言都想做高大全的东西,别人有的我要有,别人没有的我更要有。

我们可以做一个分页的组件,在web应用中是很常见的一个功能

<form>
<singoopager></singoopager>
<div style="clear:both">
    <h3>当前点击第 {{pageIndex}} 页</h3>
</div>
</form>

<script>
    var pagerCount = 12;
    var pageIndex = 1;
    Vue.component('singoopager', {
        template: '<ul><li v-for="item in pagerCount" class="pager" @click="gotoPage(item)">{{item}}</li></ul>{{pagerCount}}',
        methods: {
            gotoPage: function (num) {
                vm.pageIndex = num;
            }
        }
    })
    var vm=new Vue({
        el: "form",
        data: {
            htmlText: "分页组件",
            pageIndex: 1
        }
    });    
</script>

注意:组件的名称全要小写,不能有大写字母!

Vue还有很多功能,功能很强大,了解更多可以去官网看看。

点击这里下载Demo