由于最近大家都喜欢vue这道菜，正好也在建站，所以就一下vue的原汁原味做法（基于官网的demo说明）。 Vue（读作/vjuː/，类似于view）是一个用于构建用户界面的渐进式框架。与其他单体框架不同，Vue从一开始就设计为可增量采用。核心库只关注于视图层，并且很容易与其他库或现有项目进行拾取和集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全能够为复杂的单页应用程序提供支持。 如下是8个基础demo，都放在html文件中，可以直接运行，你按照这个就可以完成vue入门。
炒菜背景
之乎者也
菜名-八仙过海
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> //引入vue支持的包 "https://unpkg.com/vue" <br/> <script src="https://unpkg.com/vue"></script> </head> <body> //1、定义一个div，id=app，通过var app=new Vue({el: '#app',data:{}})完成双向绑定。即js函数中data:数据的改变和页面元素数据改变是关联的。 <div id="app"> {{ message }} </div> <br> //2、v符号是vue特有标识，v-bin绑定title，可以灵活绑定该span的title渲染 <div id="app-2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div> <br /> //3、v-if 通过js的seen:true/false 来实现元素的显示/隐藏 <div id="app-3"> <span v-if="seen">Now you see me</span> </div> <br /> //4、 v-for 循环的使用。你可以在 js控制台 输入：app4.todos.push({text:'hh'});从而通过js代码灵活加入新的元素。 <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <br /> //5、 v-on 绑定事件,v-on:click点击事件，来颠倒p标签内容。通过app5对象的methods来设置对应函数reverseMessage， <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> <br /> //6、v-model指令，使表单输入和应用程序状态之间的双向绑定变得轻而易举： <div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> <br/> //7、定义组件，如下组件todo-item例子简单地实现了绑定。（注：vue组件和Custom Elements 自定义元素类似，定义符合Web Components Spec网络组件规范标准。当然vue有更强的兼容性，如ie9+； <br/> //且Vue组件提供了普通自定义元素中不可用的重要功能，尤其是跨组件数据流、自定义事件通信和生成工具集成。） <div id='app-7'> <ol> <!--组件的使用需要也需要完成app-7的绑定。 --> <todo-item></todo-item> </ol> </div> <br /> //8、组件的进一步应用,如下实例，首先 v-for 循环获取每行数据item，之后item绑定到组件属性todo，item.id绑定到组件属性key1。从而根据组件template渲染能数据 <br /> //（注意：启动绑定的key 属性不生效，可能由于key是关键字，key1是可以的。） <div id="app-8"> <ol> <!-- Now we provide each todo-item with the todo object it's representing, so that its content can be dynamic. We also need to provide each component with a "key", which will be explained later. --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" v-bind:key1="item.id" ></todo-item> </ol> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hel2lo Vue1!' } }) var app2 = new Vue({ el: '#app-2', data: { message: 'You loaded this page on ' + new Date().toLocaleString() } }) var app3 = new Vue({ el: '#app-3', data: { seen: true } }) var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }) var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) /* //app-7 组件 */ Vue.component('todo-item', { template:'<li>this is a todo li</li>' }) var aap7 = new Vue({ el:'#app-7', }) /* app-8 组件 */ Vue.component('todo-item', { // The todo-item component now accepts a // "prop", which is like a custom attribute. // This prop is called todo. props: ['todo','key1'], template: '<li >值:{{key1}}:{{todo.text }}</li>' }) var app8 = new Vue({ el: '#app-8', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }) </script> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
