Vue.js基础体验（一）

今天开始学习Vue.js啦，刚开始看起来，确实很难很难，但是经过一番“周折”，发现也就那样，没有想象的那么难。
下面是今天记录的代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><h1 v-text="number"></h1><h1 v-html="number"></h1><div v-html="info"></div><div v-text="info"></div></div><div id="app-2"></div><div id="root"><h1 v-on:click="handleClick">{{content}}</h1><h1 @click="handleClick">{{content}}</h1></div><!-- 双向绑定 --><div id="root1"><!-- <div v-bind:title="'dell me '+title">hello word</div> --><div :title="'dell me '+title">hello word</div><input v-model="content" /><div >{{content}}</div></div><!-- 计算属性 --><div id="root3">姓：<input v-model="fistName" /><br/>名：<input v-model="lastName" /><div>{{fullName}}</div><!-- 侦听器,监听某一个数据的变化 --><div>{{count}}</div></div><!-- v-if,v-show,v-for指令的用法 --><div id="root4"><div v-if="show"> hello word</div><!-- <div v-show="show"> hello word</div> --><button @click="headClick">toggle</button><ul><!-- <li v-for="item in list":keys="item">{{item}}</li> --><li v-for="(item,index) in list":keys="index">{{item}}</li></ul></div><script type="text/javascript">var vm = new Vue({el:'#app',data:{number:123,info:'<h1 style="color:red">这是信息</h1>'}});var vm2 = new Vue({el:'#app-2',template:'<h1>{{msg}}</h1>',data:{msg:'这是template的用法'}})var vm3 = new Vue({el:'#root',data:{content:'你好啊'},methods:{handleClick:function(){this.content = 'word'}}})var vm4 = new Vue({el:'#root1',data:{title:"this is hello word",content:"this is content"}})var vm5 = new Vue({el:'#root3',data:{fistName:'',lastName:'',count:0},/* 计算属性 */computed :{fullName:function(){return this.fistName+'-'+this.lastName;}},/* 侦听器 */watch:{fistName:function(){this.count++;},lastName:function(){this.count++;}}})var vm6 = new Vue({el:'#root4',data:{show:true,list:[1,2,3,4,5]},methods:{headClick:function(){this.show =!this.show;}}})</script></body>
</html>

Vue.js基础体验（一）相关推荐

Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
[Vue.js] 基础 -- Vue简介
Vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 什么是渐进式? 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验. ...
vue.js 基础学习 11天 -- 转载某培训机构学习资料（转载链接未找到-暂定原创 - 非原创）
Vue.js - Day1 课程介绍前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
vue.js基础学习（Vue Router安装与使用）
基础入门:vue.js Vue Router安装与使用 1.Vue Router安装在cmd窗口运行命令:npm install vue-router@4,安装Vue Router: 2. Vue ...
vue js基础语法
什么是vue vue是目前前端主流的js框架,它和库的区别在于: 库是更多是一个封装好的特定的集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权在使用者手中,在库中 ...
vue.js基础学习（数组更新）
基础入门:vue.js 数组更新 1.vue.js 数组更新通过索引值修改数组,this.list[6]=7: push():给数组末尾添加元素,this.list.push(7,8,9): pop ...
Vue.js基础知识
一.Vue.js是什么? 它是一套用于构建用户界面的渐进式框架.其设计为自底向上逐层应用.Vue只关心视图层. 二.声明式的渲染 1. Vue.js的核心是采用简洁的模板语法来声明式地将数据渲染到DO ...

Vue.js基础体验（一）

Vue.js基础体验（一）相关推荐

最新文章

热门文章