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 官方推荐
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操作: