探索Vue.jscomponent内容实现

<!-- 这是我们的 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<br><script>
var exampleVM = new Vue({
 el: '#example-1', // 在一个id为'example-1'的实体上挂载
 data: {
 name: 'Vue.js'
 } // 数据流
})<br></script>

<script><br>var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 }
})<br></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>