关于vue.js:WEBVUE

11次阅读

共计 2604 个字符，预计需要花费 7 分钟才能阅读完成。

Vue.js 是一套构建用户界面的 渐进式 框架。与其余重量级框架不同的是，Vue 采纳自底向上增量开发的设计。

什么场景应用 VUE？
绝大多数以数据操作（增删改查）为主的 PC 端或挪动端我的项目都可用 vue 开发比方: 美团，饿了么，淘宝，知乎，公众点评，微博 …

MVVM 是一种设计思维，对晚期的 web 前端开发做了加强，将前端代码按其职责的不同分成了三局部：

界面 (View) 局部：由 html+css 形成，并容许在 html,css 中间接应用变量，表达式，语句等。
模型局部(Model)：个别为一个 JSON 格局的对象，用于存储 view 中须要的数据和函数。
视图模型(ViewModel): 专门负责主动保护模型对象中的变量与界面中的变量同步。

因为有了 ViewModel 的存在，数据能够主动同步到界面上，简直防止了大量反复的编码！

Vue.js 的外围是一个容许采纳简洁的模板语法来申明式地将数据渲染进 DOM 的零碎：

<div id="app">
  {{message}}
</div>

var app = new Vue({
  el: '#app',
  data: {message: 'Hello Vue!'}
})

后果：

Hello Vue!

v-bind
元素的属性值随着程序内容的变动而变动，可应用 v -bind：

< 元素 v-bind: 属性名 ="变量或 js 表达式">
简化模式，根本语法如：< 元素 : 属性名 ="变量或 js 表达式">

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">

v-show

v-if 和 v -else

v-else-if

v-for
为以后遍历的元素提供别名：

<div v-for="item in items">
  {{item.text}}
</div>

v-on
@click 为 v -on:click 的缩写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 v-on:click="handleClick(1)">{{msg}}</h1>
            <h1 @click="handleClick(2)">{{msg}}</h1>
        </div>
    </body>
    <script>
        new Vue({
            el: "#app",
            data: {msg: "Hello Vue."},
            methods:{handleClick: function( who){this.msg = who+"- 你好，世界";}
            }
        });
    </script>
</html>

v-html

v-text

v-model
你能够用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创立双向数据绑定。它会依据控件类型主动选取正确的办法来更新元素。

会疏忽所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据起源。你应该通过 JavaScript 在组件的 data 选项中申明初始值

v-model 在外部为不同的输出元素应用不同的 property 并抛出不同的事件：

text 和 textarea 元素应用 value property 和 input 事件；
checkbox 和 radio 应用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

实例测试：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            v-text:<div v-text="txt"></div>
            v-html:<div v-html="html"></div>
            
            v-if:
            <div v-if="age>18"> 成年 </div>
            <div v-if="age<=18"> 未成年 </div>
            
            v-else:
            <div v-if="age>18"> 成年 </div>
            <div v-else="age<=18"> 未成年 </div>
            
            v-else-if: 小于 60 不及格，60-90 及格，90-100 优良
            <div v-if="score>=90"> 优良 </div>
            <div v-else-if="score>=60"> 及格 </div>
            <div v-else="score<60"> 不及格 </div>
            
            v-show:
            <div v-show="age>18"> 一枝老花 </div>
            
            v-for:(foreach,o 代表以后对象，每次从数组中获取一个值，寄存在中)
            <div v-for="o in colors">{{o}}</div>
            <div v-for="(a,b,c,) in person">{{a}}，{{b}}，{{c}}</div>
            <div v-for="(v,k,i,) in person">{{i}}，{{k}}，{{v}}</div>
            
            <div v-for="(v,k,i) in animal">{{cat}}</div>
            
            object 对象：<div v-for="p in person">{{p}}</div>
            <div>{{person.name}}</div>
            <div>{{person.tostring()}}</div>
            
        </div>
    </body>
    <script>
        new Vue({
            el:"#app",
            data:{
                txt:"这是一个文本",
                html:"<div style ='font-size:26px'> 这是一个大字 </div>",
                age:17,
                score:62,
                colors:['red','blue','green'],
                person:{
                    name:"jack",
                    age:20,
                    address:"北京欢迎您",
                    tostring:function(){return this.name+","+this.age;}
                },
                animal:{
                    name:"dog",
                    age:2,
                    color:"red",
                    cat:{name:"猫咪"}
                }
            }
        })
    </script>
</html>

后果：

正文完