Vue.js初试水

今天开始学一下Vue.js。

1.为什么学 Vue

答:为了装13，因为vue更加的牛一些，就像当初JQ一样。因为要励志成为一个全栈工程师，之前实现SINGCMS的时候，thinkPhp在进行增改查等一系列操作之后获得的数据，通过模板或者foreach遍历到前端页面。

但是为了做到前后端分离，就像mvc分离一样，就不想让后端的数据直接喷到我前端的页面上，这时候就需要一个框架或者工具的东西，把后端的数据接收过来，转化成json数据，然后再遍历到前端的页面上，这样就实现了前后端页面的分离。

2.为什么选择vue.js

答:因为Vue.js更牛一些，直接操作数据层就可以动态的改变前端dom结构。（没用过react angulajs.）

3.Vue.js到底是个什么东西。

答:这是一个前端MVVM框架 Model-View-ViewModel。那什么是mvvm？

view就是视图层也就是html Dom

Model就是js数据层。

ViewModel是一个中间件，关键点就是着。VM会帮助view去监听model数据层，只要数据一更改，vm立刻让view更改。反过来vm会帮助model将数据绑定到view层。vm是一个数据视图驱动。

这就是mvvm。

4.怎么用？

答:贼鸡简单，在html（view）中将vue.js（vm）引入并引入一个app.js（model）;

    <script src="vue.js"></script>
    <script src="app.js"></script>

5.基础结构？

答：

new vue({
    el:'',
    data:{},
　　 methods:{}
})

看这结构是不是很像声明一个对象，el是element选择方式跟JQ一样 data是数据(按我说就是一个存放变量的地方)，methods 一个存放函数的地方

我自己的感觉这个很像C++中的定义一个对象（实际也是定义一个js vue对象）。

6.来一个简单实例。

答:html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
         {{ mess }} 
        <input type="text" v-model="mess"> 
    </div>
    <script src="vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

app.js

new vue({
    el:'#app',
    data:{
        mess:'hello world'
    }
})

效果就是在input中输入就会自动的更新div中的内容，自己脑补吧。

7.关键词与注意事项

在vue.js中采用的是驼峰命名包括Css属性

data变量与函数分开写，有点像C++的面向对象思想

v-bind 绑定dom属性
v-for 循环遍历
v-model 绑定模板
v-on:click 绑定onclick事件
v-text 形同{{v-text}}
v-html 可以传html按innerHTML处理 vue不会编译
v-show="no" 根据传值是否显示当前元素相当于display none
v-if v-else v-else-if 形同if else else-if
v-once 只编译一次

8.另一个实例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .active{
            font-size: 50px;
            color:red;
        }
        .uctive{
            font-size: 30px;
            color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="[isActive==='true'?activeClass:errorClass]" v-on:click="zhuan">hahah</div>
    </div>
    <script src="vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

app.js

new Vue({
  el: '#app',
  data: {
    isActive:'true',
    activeClass:'active',
    errorClass:'uctive'
  },
  methods:{
      zhuan: function () {
        return this.isActive=='true'?this.isActive='false':this.isActive='true';
        console.log(this.isActive);
    }
  } 
})

自己猜猜看这是什么效果。

9.加油你是最 _{_胖^胖}的

SB MDZZ KKKKKKK

posted @ 2017-06-29 00:29 Charles王志会阅读(322) 评论(0) 收藏举报

刷新页面返回顶部

Charles王志会

又开始咸鱼了。

Vue.js初试水

公告