Vue.js库的第一天的学习
一,vue.js简介
Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择
所以说, vue.js是一套构建用户界面的渐进式框架
Vue.js的核心库只关注视图层,Vue的目标通过尽可能简单的API实现相应的数据绑定,
在这一点上Vue.js类似于后台的模板语言
Vue.js也可以将界面拆分成一个个的组件,通过组件来构件界面,
然后用自动化工具来生成单页面系统
二,Vue实例
<!-- 每一个Vue应用都是通过实例化一个新的Vue对象开始的 --> <div id="app">{{ msg }}</div> <script> var vm = new Vue({ el:'#app', data:{ msg:'Hello World!' } }) </script>
其中,el属性对应一个标签,当vue对象创建后,这个标签的区域就被vue对象接管,
在这个区域就可以使用vue对象中定义的属性和方法
三,Vue.js模板语法
模板语法指的是如何将输入放入html中, Vue.js使用了基于HTML的模板语法,
允许开发者声明式的将DOM绑定至底层Vue实例的数据。
<div id="app"> <!-- 插入式, 使用'Mustache'语法的文本插值 --> <p>{{ sTr }}</p> <p>{{ sTr.split('').reverse().join('')}}</p> <p>{{ iNum+15 }}</p> <p>{{ bisOk?'Yes':'No' }}</p> <a v-bind:href=sUrl>百度的链接</a><br><br> <!-- 指令, 监听click事件来执行fnReversal方法 --> <input type="button" value="反转" v-on:click='fnReversal'> </div> <script> var vm = new Vue({ el:'#app', data:{ sTr:'Hello World!', iNum:10, bisOk: true, sUrl:'http://www.baidu.com' }, methods:{ fnReversal:function(){ this.sTr = this.sTr.split("").reverse().join(''); } } }) </script>
四,class 与 style绑定
使用v-bind指定来设置元素的class属性或者style属性,它们的属性值可以是表达式,
vue.js在这个一块做了增强,表达式结果除了是字符串之外,还可以是对象或数组
<div id="app" v-bind:class="{big:isActive, red:haserror}"> 绑定方式一,对象语法 </div> <script> // 第一种方式对象语法 var vm = new Vue({ el:'#app', data:{ isActive: true, haserror: false } }) </script>
五,条件渲染
通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)
<!-- v-if 可以控制元素的创建或者被销毁 --> <!-- v-if 是真正的把元素删除了 --> <div id="box"> <h1 v-if='isV'>这是使用 v-if 的h1</h1> <h2 v-else>这是使用 v-else 的h2</h2> <!-- v-else 必须紧跟在 v-if或者v-else-if 后面 --> <h3 v-show='isV'>这是使用 v-show 的h3</h3> <!-- v-show把元素的 display 状态改为none,只是隐藏了--> <div v-if='sCode=="A"'>A</div> <div v-else-if='sCode=="B"'>B</div> <div v-else-if='sCode=="C"'>C</div> <div v-else>NOT A/B/C</div> </div> <script> var vm = new Vue({ el:'#box', data:{ isV: false, sCode:'D' } }) </script>