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是要注意大小写的。

参考于菜鸟教程。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Logo

前往低代码交流专区

更多推荐