Vue

[keyfall]

安装

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

hello实例

<div id="app">
{{ message }}
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'hellosdf vue!'
        }
    })
</script>

v-bind绑定

<div id="app">
<a v-bind:href="url">click me</a>
<span v-bind:title="message">
sfjisdfjsdlf
</span>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'页面加载与' + new Date().toLocaleString(),
            url:'https://www.baidu.com'
        }
    })
</script>

建议{{}}用于动态显示正文内容，v-bind用于动态显示html标签属性

v-for

<ol>
    <li v-for="todo in todos">
        <a v-bind:href="url">{{ todo }}</a>
    </li>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'页面加载与' + new Date().toLocaleString(),
            url:'https://www.baidu.com',
            todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
        }
    })
</script>

[keyfall]

v-once 执行一次性插值，不会根据数据改变而改变

<span v-once>这个将不会改变: {{ msg }}</span>

v-html 输出html

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

v-bind,v-on缩写

v-bind
<a :href="url">...</a>
<a :[key]="url"> ... </a>

v-on
<a @click="doSomething">...</a>
<a @[event]="doSomething"> ... </a>

[keyfall]

计算属性,computed属性，为了不把表达式放在{{}}中，代码清晰

<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage}}</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:"zosngminsdf",
        },
        computed:{
            reversedMessage: function(){
                return this.message.split('').reverse().join('')
            }
        }

    })
</script>

计算属性是基于它们的响应式依赖进行缓存的,比如reversedMessage是基于message的，如果message改变了，那么reversedMessage也会改变，否则只会输出原来的值

计算属性setter ,fullname改变，firstname和lastname改变

<div id="app">
{{fullName}}

</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            firstName:'foo',
            laskName:'bar'
        },
        methods:{
            timemethod: function(){
                return new Date().to
            }
        },
        computed:{
            fullName: {
                get:function(){
                return this.firstName + ' '+this.laskName
            },
                set:function(newV){
                    var names = newV.split(' ')
                    this.firstName = names[0]
                    this.laskName = names[names.length -1]
                }
            }
        }

    })
</script>

[keyfall]

class与style

绑定class

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data: {
  isActive: true,
  hasError: false
}

也可以绑定一个字典对象

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

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'
    }
  }
}