前端技术——Vue.js

Vue.js

 一套用于构建用户界面的渐进式JavaScript框架

 

导入js

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

案例：

<script src="http://how2j.cn/study/vue.min.js"></script>
 
<div id="div1">
   
  {{gareen.name}}
 
</div>
  
<script>
  
//准备数据
var gareen = {"name":"盖伦","hp":616};
 
//通过vue.js 把数据和对应的视图关联起来
new Vue({
      el: '#div1',
      data: {
        message: gareen
      }
    })
  
</script>

 

1.v-on 监听事件 （点击效果）

 

2.条件语句：

v-if

v-else

v-else-if

 

3.循环语句

v-for 循环语句

 

4.属性绑定

v-bind 做属性绑定

 

5.双向绑定

v-model 双向绑定

多种风格数据的绑定

 

6.计算属性

computed

 

7.监听属性

watch

 

8.过滤器

（首字母大写）

 

9.组件

components

 

10.自定义指令

 

11.路由：

相当于就是局部刷新

（1）添加额外的库 ：vue-router.min.js

（2）

<script src="http://how2j.cn/study/vue.min.js"></script>
<script src="http://how2j.cn/study/vue-router.min.js"></script>
<head>
    <style>
    a{
      text-decoration: none;
    }
    a.router-link-active{
    /*   color:blue; */
      background-color: lightGray;
    }
    div.menu{
         border:1px solid gray; 
        float:left;
    }
    div.menu a{
        display:block;
    }
    
    div.workingRoom{
        margin-left:100px;
    }
    
    div#app{
        width:500px;
        padding:10px;
        margin:10px auto;
    }
    </style>
</head>

<div id="app">
    <div class="menu">
        <!--
            router-link 相当于就是超链
            to 相当于就是 href
        -->
        <router-link to="/user">用户管理</router-link>
        <router-link to="/product">产品管理</router-link>
        <router-link to="/order">订单管理</router-link>
    </div>
    
    <div class="workingRoom">
        <!-- 
            点击上面的/user,那么/user 对应的内容就会显示在router-view 这里
         -->
            <router-view></router-view>    
    </div>

</div>
<script>
    /*
    * 申明三个模板( html 片段 )
    */
    var user = { template: '<p>用户管理页面的内容</p>' };
    var second = { template: '<p>产品管理页面的内容</p>' };
    var order = { template: '<p>订单管理页面的内容</p>' };
    /*
    * 定义路由
    */
    var routes = [
        { path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user，没有这个就是空白
        { path: '/user', component: user },
        { path: '/product', component: second },
        { path: '/order', component: order }
    ];
    /*
    * 创建VueRouter实例
    */
    var router = new VueRouter({
        routes:routes
    });
    /*
    * 给vue对象绑定路由
    */
    new Vue({
        el:"#app",
        router
    })

</script>

 

 

使用ajax的方法:

（http://how2j.cn/k/vuejs/vuejs-axios/1759.html）

几种框架：fetch.js  和  axios.js

 

Vue.js 并没有限制使用哪种方式进行 ajax 访问，所以可以使用如下方式
1. 原生 ajax
2. JQuery
3. vue-resource
4. fetch.js
5. axios.js

那么到底用哪种方式呢？

1. 原生一般不在项目中直接用
2. jquery 不如4，5方便
3. vue-resource 已经不再维护了，所以不推荐
4. fetch.js 是 vue.js 官方推荐
5. axios.js 是vue.js 官方推荐
 
 

VUE.JS的CRUD操作：

 
 

 

posted @ 2019-06-28 16:05  StingLon  阅读(293)  评论(0)    收藏  举报