教你短时间内学完VUE.js教程一

VUE.js是一套构建用户界面的渐进式框架，只关注 图层，采用自底向上增量开发的设计；目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

我是用的是CDN方法，因为这样很简便可以立即使用；把下面的CDN复制在HTML内就可以使用了。有三个版本同时放的位置也是不相同的，我这个是放在head内的

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

uve.js使用中你就会发现，在开头有一个类似声明的div;为什么出现？就是因为每个UVE应用都是要通过实例化VUE来实现的。

实例：

<div id="app"><!--必备-->
    <div v-html="message"></div>

</div>
<script>
    new Vue({<!--必备:Vue构造器-->
        el:'#app',<!--必备：参数el-->
        data:{/*必备：定义属性*/
            message:'<h1>好好学习</h1>'
        }
    })

效果图：

 

 

就是这样的模式，大部分能实现VUE就是改变也是万变不离其宗的。

还有是这样的

实例：

<div id="vue_det">
    <p>site : {{site}}</p><!--{{}}:用于输出对象属性和函数返回值-->
    <p>{{details()}}</p>
    </div>
    <script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "好好学习",
            alexa: "10000"
        },
        methods: {/*用于定义的函数，可以通过return来返回函数值*/
            details: function() {
                return  this.site + " - 只为更好的活着！";
            }
        }
    })
</script>

效果图：

 

开始启程UVE.js教程

模板语法：

文本插值就是用{{}}代表的文本插值

<p>{{message}}</p>

Html:使用v-html指令用于输出html代码：

<div v-html="message"></div>

属性：html属性中的值应使用v-bind

<div v-bind:class="{'class1':use}"><!--v-bind:用于HTML得指令，trun的话就不能使用，false可以使用-

缩写为：<div :class="{'class1':use}">

表达式：vue提供了完全JavaScript表达式支持

<div id="app">
    {{6-4}}<br>
    {{ok?'YES':'NO'}}<br>
    {{age.split('').reverse().join('')}}
    <div v-bind:id="'list-'+id">暖暖
</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            age: '爱心',
            ok:'turn',
            id:4
        }
    })
</script>

指令：是带有v-前缀的特殊属性；用于表达式的值改变时，将某些行为应用到DOM上

<p v-if="seen">看看我</p><!--v-if判断(false/true)是否存在p元素-->

 

 

 

参数：在指令后以冒号指明

<pre><a v-bind:href="url"></a></pre><!--参数在指令后以冒号指明；用来响应->

 

修饰符：是以半角句号（也就是英文的句号）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<form v-on:submit.prevent="onSubmit"></form>

缩写:<form @submit.prevent="onSubmit"></from>

用户输入：在input输入框中我们可以使用v-model指令来实现双向数据绑定

<p>{{message}}</p>
<input v-model="message"><!--双向控制-->

字符串反转：按钮事件我们使用v-on监听事件，并对用户的输入进行响应。

<p>{{message}}</p>
<button v-on:click="reverseMessage">反转字符串</button>

过滤器：允许你自定义过滤器，被用作一些常见的文本格式化。由“管道符”指示。

<div id="app">
    {{age | lize}}
</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            age: '爱心'
        },
        filters: {
            lize: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1);
            }
        }
    })
</script>

注意：Vue是要注意大小写的。

参考于菜鸟教程。