介绍
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script> window.onload=function (){ //声明式渲染 app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) //v-bind:title给标签动态绑定提示 app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } }) //v-if条件 app3 = new Vue({ el: '#app-3', data: { seen: true } }) //v-for循环 app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) //v-on:click点击事件 app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) //v-model双向绑定 app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) } script> head> <body> <div id="app">{{ message }}div> <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! span> div> <div id="app-3"> <p v-if="seen">现在你看到我了p> div> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} li> ol> div> <div id="app-5"> <p>{{ message }}p> <button v-on:click="reverseMessage">逆转消息button> div> <div id="app-6"> <p>{{ message }}p> <input v-model="message"> div> body> html>
组件
注册一个全局组件语法格式如下:
Vue.component(tagName, options)
第一要写在最后,并且组件也要声明
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> head> <body> <ol id="app"> <todo-item>todo-item> ol> <script> // 定义名为 todo-item 的新组件,tagName为todo-item(html中直接使用) Vue.component('todo-item', { template: '这是个待办项 ' }); //声明式渲染不能少 new Vue({ el: '#app' }) script> body> html>