vue_属性绑定

1.vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1是一套用于构建用户界面的渐进式框架
2与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
3Vue 的核心库只关注视图层，易于上手，还便于与第三方库或既有项目整合。
4Vue 也完全能够为复杂的单页应用提供驱动。

2.数据交互

基础数据与属性交互

​ v-bind:属性

<div id="app" v-bind:title='msg1'>
        {{message}}
    </div>


var app = new Vue({
        el:'#app',
        data:{
            message:'hellow Vue1',
            msg1:'这是一个标题'
        }
    })


常规数据绑定加{{}}
元素属性绑定不加{{}}

与 Style 绑定

绑定类名v-bind:class

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>
和如下 data：

data: {
  isActive: true,
  hasError: false
}
结果渲染为：

<div class="static active"></div>

<div v-bind:class="{ active: isActive }"></div>

语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。

对象语法

HTML
<div v-bind:class="classObject"></div>


js
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

计算属性控制

<div v-bind:class="classObject"></div>


data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

v-bind:class="[activeClass, errorClass]"

三元表达式

v-bind:class="[isActive ? activeClass : '', errorClass]"

数组混合对象语法

v-bind:class="[{ active: isActive }, errorClass]"

在组件上

例如，如果你声明了这个组件：

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
然后在使用它的时候添加一些 class：

<my-component class="baz boo"></my-component>
HTML 将被渲染为：

<p class="foo bar baz boo">Hi</p>
对于带数据绑定 class 也同样适用：

<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive 为 truthy[1] 时，HTML 将被渲染成为：

<p class="foo bar active">Hi</p>

绑定内联样式v-bind:style

<header
   :style="{height: `calc(1.06rem + ${statusBarHeight}px)`, paddingTop: `${statusBarHeight}px`}">

对象语法

v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"

数组语法

v-bind:style="[baseStyles, overridingStyles]"

多重值

:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

子组件样式给style加scoped （作用域）这样不会影响父组件

<style scoped>
.licolor{
    color: green;
}
</style>

使用less或scss

<style scoped lang='less'>
.licolor{
    color: green;
}
</style>

style 动态拼接

<div class="metop_title" :style="{
      height: `calc(1.06rem + ${statusBarHeight}px)`,
      paddingTop: `${statusBarHeight}px`,
    }">我的</div>

数据更改

​ 更改data数据

<div id="app3">
       <p v-for="everylast in boxs">
           {{everylast.text}}
       </p>
    </div>


var app3 = new Vue({
        el:'#app3',
        data:{
            boxs:[
                {text:1},
                {text:2},
                {text:3}
            ]
        }
    })


数据更改
app3.boxs.push({text:4})

可以看vue实例-》数据与方法
https://cn.vuejs.org/v2/guide/instance.html

添加事件监听

​ v-on

<div id="app4">
        <p>{{app4message}}</p>
        <button v-on:click="reversefn">点击翻转</button>
    </div>

var app4 = new Vue({
        el:'#app4',
        data:{
            app4message:'这是一句话'
        },
        methods:{
            reversefn:function(){
                this.app4message = this.app4message.split('').reverse().join('')
            }
        }
    })

数据的双向绑定

​ v-model

<!-- v-model的双向数据绑定 -->
    <div id="app5">
        <p>{{message}}</p>
        <input type="text" v-model="message">
    </div>


var app5 = new Vue({
        el:'#app5',
        data:{
            message:'实时数据的双向绑定'
        }
    })

v-text 和 v-html 可以代替差值表达式

属性数据的双向绑定

​ v-bind 可缩写为 :bind

html
<h1 v-on:click='msgfn' v-bind:title='title'>{{msg}}</h1>


js
<script>
  new Vue({
    data:{
      msg:'hello word',
      title:'这是个信息'
    },
  })
</script>

表单输入绑定

基础用法v-model

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

文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

注意：在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。

复选框

单个复选框，绑定到布尔值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多个复选框，绑定到同一个数组：

<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>
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

单选按钮

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

选择框

单选时：

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

用 v-for 渲染的动态选项：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

3.组件化应用构建

创建组件

Vue.component('todo-item', {
        template: '<li>123</li>'
    })

var app6 = new Vue({
        el:'#app6',
        data:{
            i
        }
    });

HTML
<ol id="app6">
        <!-- 创建一个 todo-item 组件的实例 -->
        <todo-item></todo-item>
    </ol>

组件传值

父组件子组件互相传值

html
<div id="demo">
   <input type="text" v-model="valuedata">
   <button @click='sub_fn'>提交</button>
   <ul>
     <item-li v-for="(item,index) in lists" :key="index" :content="item" :index="index" @delete="handledelete"></item-li>
   </ul>
  </div>


js
<script>
  Vue.component('item-li',{
    props:['content','index'],
    template:'<li @click="handleclick">{{content}}</li>',
    methods:{
      handleclick:function(){
        this.$emit('delete',this.index)
      }
    }
  })
  new Vue({
    el:'#demo',
    data:{
      valuedata:'',
      lists:[]
    },
    methods:{
      sub_fn:function(){
       this.lists.push(this.valuedata)
      },
      handledelete:function(e){
        this.lists.splice(e,1)
        
      }
    }
  })
</script>

​ 定”。