vue菜鸟笔记

作者: miky_zheng | 来源:发表于2019-02-18 23:18 被阅读0次

菜鸟Vue学习笔记（三）
vue菜鸟笔记
初识Vue笔记
JAVA教程：菜鸟Vue学习笔记（五）
JAVA学习笔记系列：菜鸟Vue学习笔记（四）
你不懂鸡蛋（一）
Typescript
VUE相关
vue 模板
vue.extend、 new vue()、component、

1.不同于angular的数据双向绑定；vue为单向绑定。

2.同样有指令。angular是“ng-show”表示，vue对应的是“v-show”表示
再如：

 <div v-html="message"></div>

3.路由,
angular html写法是

 <a href="#!/foo">首页</a>
<div ng-view></div>

vue html写法是

 <router-link to="/foo">Go to Foo</router-link>
<router-view></router-view>

angular js写法：

angular.module('routingDemoApp',['ngRoute'])
        .config(['$routeProvider', function($routeProvider){
            $routeProvider
            .when('/foo',{template:'这是首页页面'})
            .otherwise({redirectTo:'/'});
        }]);

vue js写法：

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
 
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
 
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo }
]
 
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
 
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app') //app为id
 
// 现在，应用已经启动了！

4.作用域于控制器
vue一般是在组件内定义，而且new出vue的对象是与id绑定的（关键字：el）。
vue 没有$scope的定义变量的方法。取而代之的是：el，data，methods这种方式。
不同于angular的控制器和作用域的定义。



var vm = new Vue({
        el: '#vue_det',  
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })

5.vue最强大的功能：组件
可以扩展 HTML 元素，
全局组件

<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

局部组件

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

6.angular有服务的定义，vue是分组件模块的，淡化了这一概念。
两者都有$http

angular

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

vue

this.$http.get('get.php',{params : {a:1,b:2}}).then(function(res){
    document.write(res.body);    
},function(res){
    console.log(res.status);
});