Vue浅学习笔记

Vue

IDEA：插件 VUE

vue指令

• v-if
• v-else
• v-else-if

      <div id="app">
      <span v-if="type==='A'">Aspan>
      <span v-else-if="type==='B'">Bspan>
      <span v-else-if="type==='C'">Cspan>
      <span v-else>nospan>
      div>
  

• v-for

    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}
    li>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
  <script>
      var vm = new Vue({
          //Model：数据
          el : "#app",
          data : {
               items : [
                  {message : "fanxu"},
                  {message : "muyu"}
               ]
          }
      });
  
  script>
  

• v-on

七个常用属性

<script>
	var vm = new Vue({
        el:"",
        data:{
            message:"hello vue"
        },
        methods:{//方案必须定义在vue的Method的对象中
            sayHi:function(){
                alert(this.message);
            }
		}
    })    
</script>

• el
• data
• template
• method
• render
• computed
• watch

v-model双向绑定

 <div id="app">
        <input type="text" value="" v-model="message"/> {{message}}
        
        <br><br>
        <input type="radio" name="sex" value="男" v-model="param1"> 男
        <input type="radio" name="sex" value="女" v-model="param1"> 女
        <br>
        选中了：{{param1}}<br><br>

        <select  v-model="param2">
            <option value="" disabled>--请选择--option>
            <option>音乐option>
            <option>文学option>
            <option>工具option>
            <option>科幻option>
            <option>名著option>
        select><br>
        选择了：{{ param2}}
    div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"1",
            param1:"",
            param2:""
        }
    });
script>

用v-model绑定一个data里的值，然后再在其他地方调用这个指
就可以做出一边的值改变，多处位置的文本同时改变的效果

网络通信：Axios

什么是Axios？

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。

既然是发get、post请求，那为什么不用jQuery.ajax呢？

这是因为使用jQuery会大量的操作DOM，这样会导致前端页面变得迟缓，所以使用了Axios这种轻量级的处理方式。

例子

先导入vue的依赖和axios的依赖

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>

style

html页面

<div id="app" v-clock>
    {{info.name}} <br>
    {{info.address.street}}<br>
    <a v-bind:href="info.url">{{info.name}}a>
div>

javascript

<script>
    var vm = new Vue({
        el: "#app",
        //data return这种写法可以接受axios的返回值，与之前使用data不同。
        data(){
          return{
              //这里要注意，需要调用的属性写在这里就可以，不需要的可以不写，注意一定不要写错字段的名字。否则会接收不到值
              info:{
                  name: null,
                  url: null,
                  page: null,
                  address: {
                      street: null,
                      city: null,
                      country: null
                  }
              }
          }
        },
        //这里写axios方法，mounted是vue的钩子函数
        mounted(){
            axios.get("data.json").then(response=>( this.info=response.data));
        }
    })
</script>

json数据

{
  "name": "百度",
  "url": "http://www.baidu.com",
  "page": 88,
  "isNonProfit": true,
  "address": {
    "street": "鲁谷街道.",
    "city": "北京",
    "country": "中国"
  }
}

计算属性

计算出来的结果，保存在属性中，内存中运行：虚拟Dom
可以把它想象成缓存

computed与methods的区别

• methods中的方法，在通过vm调用之后，是会重新执行一遍的
• comupted中的方法，比较类似于缓存，如果方法里的内容没有变化，那么即使通过vm调用了这个方法，也不会重新执行一遍，而是会调用之前执行好的内容。、

所以，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销，前端节省的资源对于并发来说很是重要

什么是计算属性：

计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算
的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的
属性（将行为转化成了静态的属性），仅此而己;可以想象为缓存！

html

<div id="app">
    
    <p>currentTime1:{{currentTime1()}}p>
    
    <p>currentTime2:{{currentTime2}}p>
div>0

javascript

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello world"
        },
        //每次调用的时候都会重新计算
        methods: {
            currentTime1: function(){
                return Date.now();//返回一个时间戳
            }
        },
        //computed计算完这个方法之后，会将值存入内存中，除非方法里的值变了，否则一直不会刷新
        //可以将computed想象成缓存，用于节约系统的开销
        computed: {
            currentTime2: function(){
                return Date.now();//返回一个时间戳
            }
        }
    })
script>

Vue组件：Vue.Component

<div id="app">
    <l v-for="item in items" v-bind:a="item">l>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
    Vue.component("l",{
        props:['a'],
        template:"
{{a}}
"
    });
    var vm = new Vue({
        el:"#app",
        data:{
            items:['java','linux','前端']
        }
    }); 
script>

首先data中的items里存放了一个数组
然后放到上边已经绑定好的l组件中
l组件需要遍历数组中的多个值
用v-for实现，但是因为是组件显示
所以一般的传值方式传不进去
用v-bind:a="item"绑定参数
然后在Vue.component中的props:[‘a’]放已经绑定好的变量

slot 插槽

类似于模板，可以通过插槽动态的生成一种模板化的dom，多个组件通过slot互相关联

    <div id="app">
        <todo>
            
            <todo-title slot="todo-title" :title="title">todo-title>
            <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item">todo-items>
        todo>
    div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
//先定义一个大的模板
    Vue.component("todo",{
        template:'
'+
                    ''+//通过name属性，和下边定义的component绑定起来
                    '
' +
                        ''+
                    '
'+
                '
'

    });
//详细的定义了一个标签    
    Vue.component("todo-title",{
//绑定的属性名        
        props:['title'],
        template:'
{{title}}
'
    });
    Vue.component("todo-items",{
        props:['item'],
        template:'
{{item}}  
'
    });
    var vm = new Vue({
        el:"#app",
        data: {
            title:"范栩",
            todoItems:['fanxu','muyu','yu']
        }
    });
script>

自定义事件分发

    <div id="app">
        <todo>
            <todo-title slot="todo-title" :title="title">todo-title>
            <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                        :item="item" :index="index" @remove="removeItems(index)" :key="index">todo-items>

        todo>
    div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
    Vue.component("todo",{
        template:'<div>'+
                    '<slot name="todo-title">slot>'+
                    '<ul>' +
                        '<slot name="todo-items">slot>'+
                    'ul>'+
                'div>'

    });
    Vue.component("todo-title",{
        props:['title'],
        template:'<div>{{title}}div>'
    });
    Vue.component("todo-items",{
        props:['item','index'],
        template:'<li>{{index}}--{{item}} <button @click="remove">删除button>li>',
        methods:{
            remove:function(index){
                this.$emit("remove",index)
            }
        }

    });
    var vm = new Vue({
        el:"#app",
        data: {
            title:"范栩",
            todoItems:['fanxu','muyu','yu']
        },
        methods:{
            removeItems:function(index){
                this.todoItems.splice(index,1);
            }
        }

    });

主要知识点:this.$emit()，这个方法可以调用父级的方法，然后，通过前端自定义方法调用vm中的methods，达到双向绑定的效果
@等价于v-on:

创建工程

# 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装element-ui -S
npm i element-ui -S
# 安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

npm命令解释

• npm install moduleName ：安装模块到项目目录下

• npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看npm config prefix的位置

• npm install -save moduleName：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写

• npm intall -save-dev modulename：–save-dev的意思是将该模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写。

路由嵌套

export default new Router({
	routes:[
    {
		path:'/main',
		component:Main
    },{
		path:'/login'
		component:Login,
		children:[
			{path:'/user/profile',component:UserProfile},
			{path:'/user/list',component:UserList}
		]
	}
	]
})l

使用chirldren就可以进行路由的嵌套

传参和重定向

<!--//传参-->
<router-link :to="{name:'/user/profile',params:{id:1}}"></router-link>
<!--//接参-->
routes:[
{path:'/user/profile:id',component:UserProfile}
]
<!--//html取值-->
{{$route.params.id}}
<!--//!!注意，所有元素不能直接暴露在根节点中，需要有标签包裹-->

<!--props解耦-->
routes:[
{path:'/user/profile:id',component:UserProfile,props:true}
]
//props html
{{id}}

<!--重定向-->
{
	path:'/goHome',
	redirect:'/main'
}

钩子和404页面

路由模式有两种

• hash：路径带#符号，如http://localhost:/#/login
• history：路径不带#符号，如http://localhost/login

export default new Router({
	mode:'history',
	routes:[]
})

404

先创建了一个NotFound.vue 并且import了这个NotFound

{
	path:'*',
	component:NootFound
}

钩子

过滤器

beforeRouteEnter:(to,from,next)=>{
	console.log("进入路由之前");
    next();
},
beforeRouteLeave:(to,from,next)=>{
	console.log("进入路由之后");
    next();
}

参数说明：

• to:路由将要跳转的路径信息
• from:路径跳转前的路径信息
• next:路由的控制参数
  • next()跳入下一个页面
  • next(‘path’)改变路由的跳转方向，使其跳到另一个路由
  • next(false)返回原来的页面
  • next((vm=>{}))仅在beforeRouterEnter中可用，vm是组件案例

cnpm有可能安装失败，尽量使用npm