一，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>
如对本文有疑问， 点击进行留言回复！！
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法（不用jQuery）
网友评论