zoukankan      html  css  js  c++  java
  • Vue.js下载方式及基本概念

    Vue.js 简介

    说明及下载

    Vue.js使用文档已经写的很完备和详细了,通过以下地址可以查看: https://cn.vuejs.org/v2/guide/

    vue.js如果当成一个库来使用,可以通过下面地址下载: https://cn.vuejs.org/v2/guide/installation.html

    Vue.js基本概念

    我们下载了vue.js后,需要在页面上通过script标签引入vue.js,开发中可以使用开发版本vue.js,产品上线要换成vue.min.js。

    script type="text/javascript" src="js/vue.min.js"></script

    Vue代码实例(创建)

    <!DOCTYPE html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">{{ message }}</div>
    </body>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript">
    
    
        var vm=new Vue({
            //el属性对应一个标签 当el对象创建后,这个标签内的区域就被Vue对象接管,
            //接下来就可用Vue来做一些为所欲为的事情啦
            el:'#app',
            data : {message:'好湿呀'}
        });
        </script>

    数据与方法

    当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。还可以在Vue实例中定义方法,通过方法来改变实例中data对象中的数据,数据改变了,视图中的数据也改变。

    Vue实例代码(方法)

    window.onload = function(){

    var vm = new Vue({
        el:'#app',
        data:{message:'hello world!'},
        methods:{
            fnChangeMsg:function(){
                this.message = 'hello Vue.js!';
            }
        }
    });
    

    } 

    div id="app"

    <p>{{ message }}</p>
    <button @click="fnChangeMsg">改变数据和视图</button>
    

    /div

    Vus.js模板语法

    模板语法指的是如何将数据放入html中

    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,例如:

    {{ msg }}

    插入的值当中还可以写表达式:

    {{ number + 1 }}

    {{ ok ? 'YES' : 'NO' }}

    {{ message.split('').reverse().join('') }}

    <a v-bind:href="url">链接文字

    指令

    指令 (Directives) 是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式,指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。常见的指令有v-bind、v-if、v-on。

    <-- 根据ok的布尔值来插入/移除 p元素 -->

    <p v-if="ok">是否显示这一段

    <-- 监听按钮的click事件来执行fnChangeMsg方法 -->

    <button v-on:click="fnChangeMsg">按钮

    我的小boby ,有不懂的,欢迎下方评论!!!

  • 相关阅读:
    0~n-1中缺失的数字
    仅仅反转字母
    字符串相加
    反转字符串&反转字符串中的元音字母
    python OrderedDict类&LRU缓存机制练习题
    协程greenlet、gevent、猴子补丁
    生产者与消费者(两个线程之间的通信---队列实现)
    jquery的on()
    Python之内置类型
    Python之比较运算符
  • 原文地址:https://www.cnblogs.com/zqlboke/p/9021671.html
Copyright © 2011-2022 走看看