1vue.js 入门

Vue.js

 

1引用

推荐：https://cdn.jsdelivr.net/npm/vue，会保持和 npm 发布的最新的版本一致。可以在 https://cdn.jsdelivr.net/npm/vue/ 浏览 npm 包资源。

<script src="https://unpkg.com/vue"></script>

2

npm install vue

  

 

 

绑定 DOM 元素属性

最简单绑定元素{{message}}

 

 

var app = new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue!'

  }

})

 

绑定元素2

<span v-bind:title=‘message’></span>

 

var app =new Vue(

el:’#app’,

data:{

message:’hello’

}

)

条件和循环

 <p v-if="seen">现在你看到我了</p>

 

ar app3 = new Vue({

  el: '#app-3',

  data: {

    seen: true

  }

 

循环

<li  v-for="tab in tabs">{{tab.text}}</li>

 

var app = new Vue({

   el:'#app-5',

    data:{

        tabs:[

            {text:'aaa'},

            {text:'ccc'},

            {text:'dd'},

        ]

    },

 

事件用 v-on 指令绑定一个事件监听器

<button v-on:click="reverseMessage">逆转消息</button>

var app5 = new Vue({

  el: '#app-5',

  data: {

    message: 'Hello Vue.js!'

  },

  methods: {

    reverseMessage: function () {

      this.message = this.message.split('').reverse().join('') 、内容

message: '页面加载于 ' + new Date().toLocaleString()

    }

  }

})

 

 

现表单输入和应用状态之间的双向绑定。

<div id="app-6">

  <p>{{ message }}</p>

  <input v-model="message">

</div>

 

var app6 = new Vue({

  el: '#app-6',

  data: {

    message: 'Hello Vue!'

  }

})

 

 

构建组件

 

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例，在 Vue 中注册组件很

最简单的

1

<ol id="app-7">

    <!--

      现在我们为每个todo-item 提供 todo 对象

      todo 对象是变量，即其内容可以是动态的。

      我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。

    -->

    <todo-item>

    </todo-item>

</ol>

 

 

Vue.component('todo-item', {

    template: '<li>11</li>'

})

var app7 = new Vue({

    el: '#app-7', 这个一定要有

})

 

 

 

 

 

 

 

Vue.component('todo-item', {

    props: ['todo'], //属性todo

    template: '<li>{{ todo.text }}</li>'

})

var app7 = new Vue({

    el: '#app-7',

    data: {

        groceryList: [

            { id: 0, text: '蔬菜' },

            { id: 1, text: '奶酪' },

            { id: 2, text: '随便其他什么人吃的东西' }

        ]

    }

})

 

 

<todo-item

        v-for="item in groceryList"   数组是什么

        v-bind:todo="item"值是数组的一个值

        v-bind:key="item.id">

</todo-item>

 

 

 

6

 

 

4

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内

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

5

<div v-html="rawHtml"></div>

这个 div 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定

 

 

注意

 

 

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

 

例如，v-bind

 

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

 

 

缩写

v-bind 缩写

<!-- 完整语法 -->

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

 

<!-- 缩写 -->

<a :href="url">...</a>

v-on 缩写

<!-- 完整语法 -->

<a v-on:click="doSomething">...</a>

 

<!-- 缩写 -->

<a @click="doSomething">...</a>