Vue : 渐进式 JavaScript 框架
开始使用: 官网下载 vue.js 文件,在 html 文件中直接用 script 标签引入(建议下载生产版本体积小 vue.min.js )。
官方下载地址:https://cn.vuejs.org/v2/guide/installation.html
<!-- 直接引入vue.min.js , vue注册成全局变量 -->
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
HelloWorld.html 入门例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue Hello World</title>
<!-- 直接引入vue.min.js , vue注册成全局变量 -->
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 1.创建div元素 -->
<div id="xiaoen">
{{tip}} <!-- 3.使用{{}} 来调用数据 --><br/>
</div>
</body>
<script type="text/jscript">
/* 2.创建一个vue对象,挂载在指定的html元素上 */
var u = new Vue({
el:'#xiaoen',
data:{
tip: "vue helloworld !"
}
});
</script>
</html>
效果很简单,就是在页面上出现 vue helloworld !
提示: 我是在 HBuilder X 上建的vue项目,但如果直接单个 html 页面可能运行出错。
el: 跟 html元素绑定
data: html元素能调用的数据,可以说是绑定了的。
methods : 绑定的方法
v-model : 双向绑定,一边被改变,另外一边也会被改变
简单的一个案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue Hello World</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 1.创建div元素 -->
<div id="xiaoen">
{{user}} <!-- 3.使用{{}}来使用数据 --><br/>
{{user.name}}<br/>
{{user.sex}}<br/>
{{user.age}}<br/>
<input type="text" name="name" v-model="name"/>
</div>
</body>
<script type="text/jscript">
/* 2.创建一个vue对象,挂载在指定的html元素上 */
var u = new Vue({
el:'#xiaoen',
data:{
name: "xiaoen",
user:{
sex: '男',
age: '20'
}
},
methods : {
changeName:function(){
console.log(this.name);
}
}
});
</script>
</html>
运行结果:可以看到输入框的里面改变,上面的标签的内容也在改变,这就是 v-model 双重绑定的功劳。
常规表达式:
注意:只要 div 里面的 一个 {{}} 出错,便会导致整个div都显示不出来。
插值方式:
v-text=“表达式” 设置标签中的文本
v-html 设置标签中的html
v-if 判断条件
v-for 循环
v-bind: 绑定属性或对象
v-show: 判断表达式的值,true则显示,false则隐藏
v-model 数据双向绑定
v-on 注册事件
v-text v-html v-if v-bind v-show
v-bind:type 可以缩写成 : type
v - for
v - on 绑定事件 v-on:click 缩写成 @click
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
文章皆为学习记录,如有错误之处,欢迎指出一起学习,谢谢噢!