Vue - iscys - 博客园

Vue

Vue 表单双向绑定操作 v-model：

官方对v-model 的解释：

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

我们如何使用value cheked selected 属性为元素赋予初始值，是通过 vue 实例的data 进行赋值以及动态改变；

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
      <p v-bind:title='message'></p>
      <input v-model='message'>

      <div id='example-3'>
          
　　　　　　<!--
　　　　　　　　type="checkbox"  修改会动态改变data checkedNames 中数组的值
　　　　　　-->
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
          </div>

          <input type="radio" value="John" v-model="radios">
          <label for="john">John</label>
          <input type="radio" value="Mike" v-model="radios">
          <label for="mike">Mike</label>
          <span>Checked names: {{ radios }}</span>


          <select v-model='select'>
              <option v-for="op in optionsList" v-bind:value="op.id">{{op.title}}</option>
          </select>

    </div>
    
</body>
<script>

//初始化一个Vue 的实例

var app =new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    //为checkbox 赋予初始值，之后checkbox的变化，都会动态改变此数组，避免我们在js中为了获取checkbox 进行遍历
    checkedNames:['Jack'],
    radios:'',
    //默认select 框选中的值
    select:2,
    optionsList:[
        {
            title:'我',
            id:3
        },
        {
            title:'你',
            id:2
        },
    ]
  }

})

</script>
</html>

父组件向子组件传值：

现在我们父组件有一个轮播图数据的数组，要将此数组传递到我们的轮播图专门的组件中

1. 如下，要将此carousel 轮播图数组放入组件Carousel 中：

<script>
    import Carousel from './Carousel'
    export default {
            name:'home',
            components:{
                Carousel
            },
            data () {
                return {
                        msg:'Hello Worlds',
                         carousel:[
                        {
                            url:'http://pic41.nipic.com/20140508/18609517_112216473140_2.jpg'
                        },
                        {
                            url:'http://img4q.duitang.com/uploads/blog/201403/26/20140326112954_R44Bm.jpeg'
                        },
                        {
                            url:'http://pic1.win4000.com/wallpaper/2017-10-30/59f6e88b14ffe.jpg'
                        },
                        {
                            url:'http://img2.imgtn.bdimg.com/it/u=672472895,1487614317&fm=26&gp=0.jpg'
                        }
                             ]
                }
            }

        }
</script>

2. 在页面轮播图组件中进行属性的绑定，将轮播图数据绑定到组件的属性中（该属性需要在轮播图组件中自定义，在第3步）

这样就可以将数据传递到Carousel 组件中 items 是我们在Carousel 组件中定义的一个属性，用于接收轮播数组

 <carousel :items="carousel"></carousel>

3.我们看Carousel 组件中的定义：在props 中定义接收的属性 items

<script>
export default {
    name:'Carousel',
    props:{
      items:{
        type:Array
      }
    },
    data(){
        return{
            
        }
    }
}
</script>

4.我们使用Elementui 进行渲染轮播

<el-carousel indicator-position="outside">
    <el-carousel-item v-for="(item,index) in items" :key="index">
      <img :src="item.url"/>
    </el-carousel-item>
    </el-carousel>

Vue webpa c k构建目录：

index.html 以及 main.js 是项目的主入口文件；

main.js 里面有创建Vue 的实例对象，以及局部组建的主入，router 路由的注入

App.vue 是整个项目的根路由

router/index.js 是路由的配置文件，所有页面的路由都是基于此的；

posted on 2018-11-15 23:21 iscys 阅读(104) 评论(0) 编辑收藏举报