vuejs使用笔记---component内部实现

<!-- 这是我们的 View -->
<div id="example-1">
      Hello {{ name }}!
</div>
// 这是我们的 Model
var exampleData = {
      name: 'Vue.js'
}

// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var exampleVM = new Vue({
     el: '#example-1',   // 在一个id为'example-1'的实体上挂载
     data: exampleData   // 数据流
})

<!-- 这是我们的 View -->
<div id="example-1">
      Hello {{ name }}!    <!--- Vue的数据模型用{{datamodel}}包裹起来 --->
</div>

// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
<script>
var exampleVM = new Vue({
     el: '#example-1',   // 在一个id为'example-1'的实体上挂载
     data: {
              name: 'Vue.js'
           }  // 数据流
})
</script>

<p v-if="greeting">hello!<p>

<input :type = "questItem.type", :name = "questItem.name"/> 

<script>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})
</script>

vm.$watch('firstName', function (val) {  // 当firstname改变时，立马更新vm.fullname
  this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {   // 当lastname改变时，立马更新vm.fullname
  this.fullName = this.firstName + ' ' + val
})

<!---  bi-direction bound  --->
<div id="app">
    <p>{{message}}</p>
    <input v-model="message">  <!--Model，input输入的数据会立即反馈到Vue实例中-->  
</div>
<script>
    new Vue({
        el: '#app',   // View
        data: {
            message: 'Hello Vue.js'
        }
    })
</script>

<!---       表单控件绑定-单选 --->
<div id="myselect">   // 外面这一层我一开始没有加，然后就出错了，el好像一般是挂载在<div>构件上
<select v-model="selected">  // data的数据类型是selected，值是选取的值
    <option seleceted>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>

<script>
    new Vue({
        el: '#myselect',
        data:{
            selected:[]
        }
    })
</script>

<div v-if="questItem.type === 'textarea'">  // 注意是三个等号
       <textarea></textarea>
</div>
<div v=else>
        <div></div>
</div>

<ul id="demo">
    <li
        v-for="item in items"
        class="item-{{$index}}">    <!--- $index指的是当前数组元素在数组中的位置 --->
        {{parentMessage}} - {{$index}} - {{item.message}}  <!--一个view结构-->
    </li>
</ul>
<button id="btn1">点击我</button>
<script>
    var demo= new Vue({
        el: '#demo',
        data:{
            parentMessage: 'Parent',
            items:[
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        }
    })
</script>

<template>
       <div>  </div>
</template>

<script>
       export default{
             data(){ ...
             },
             methods:{ // 自定义方法，可对data进行处理
                   method1(){ ... } 
                   ...           
             },
             components: { ... }
             vuex: {
                   getters:{  // 获取store的数据
                        questionnaire: state => state.currentQuestionnaire 
                   }
                   actions: {  //用来分发数据容器store中mutations方法
                       action1(){ dispatch("SET_QUEST", item) }  // dispatch用来调用父组件store的"SET_QUEST"方法 
                       action2(){ ... }
             }   
             directives: {
                   'my-directive': {
                        bind: function(){ //钩子函数，只调用一次，在指令第一次绑定到元素上时调用 } 
                        update: function(newValue, oldValue) { //钩子函数，在bind之后以初始值为参数第一次调用，之后每当绑定至变化时调用 }
                        unbind: function(){ //钩子函数，只调用一次，在指令从元素上解绑时调用 }
                   }
             }    
　　　　　　　　　　// 自定义指令，在<template>中以<div v-my-directives = ""> 方式调用         
         }
</script>

<style>   </style>

<div @click.stop = "addItem($event)">
     <span data-type = "radio">单选题</span>
     <span data-type = "checkbox">多选题</span>
     <span data-type =  "textarea">文本题</span>
</div>

<script>
      export default{
            method: {
                    addItem(event){
                         let target = event.target
                         if(target.nodeName.toLowerCase() === 'span') {  // 当点击了选择的按钮后
                                this.showMask = true    // 显示弹出框
                                this.questItem.type = target.dataset.type   // 设置问题的类型
                         }
            }
     }
</script>

<div class = "promt-header">
    <div>
          <label> 问题名称： </label>
          <input type = "text", placeholder = "请输入标题" v-el: item-title/>
    </div>
</div>
<div class = "promt-footer" @click.stop = "handleInput(&event)">
     <button type = "button" data-operation = "confirm"> 确定 </button>
     <button type = "button" data-operation = "cancel"> 取消 </button>
</div>

<script>
      methods: {
                handleInput(event) {
                    let target = event.target
                    if(target.nodeName.toLowerCase() !== 'button') {
                        return
                    }
                    let itemTitle = this.$els.itemTitle
                    let itemSelections = this.$els.itemSelections
                    if(target.dataset.operation === "confirm") {
                        if(this.questItem.type === "textarea") {
                            this.addTextarea(itemTitle)
                        } else {
                            this.addSelections(itemTitle, itemSelections)
                        }
                    } else {
                        this.handleCancel()
                    }
               },
      }
</script>

this.$els.itemTitle.value