Vue:渐进式JavaScript框架
如何安装使用?? -->官网下载vue.js然后在自己的项目中引入 https://cn.vuejs.org/v2/guide/installation.html
<!--通过外链方式引入vue.js 注意:Vue就是一个全局变量-->
<script type="text/javascript" src="js/vue.min.js"></script>
Vue入门_helloworld:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue入门_helloworld</title>
<!--通过外链方式引入vue.js 注意:Vue就是一个全局变量-->
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<!--①创建一个html元素-->
<div id="zq">{{name}}<!--③使用{{ }}}--></div>
<script type="text/javascript">
/*②创建一个vue对象,挂载到指定zq的html标签上 */
var test = new Vue({
el:"#zq",
data:{
name:"helloworld"
}
})
</script>
</body>
</html>
效果图:
温馨小提示:在这里我是用idea建的web项目,测试中发现html文件只有写在web下才有效,如果你们写的时候发现无效,建议将html文件移动到web下进行测试~
el:挂载到指定名称的html标签上
data:绑定的数据 -->相当于给html中使用的时候所传的值
methods:绑定的方法 [注意:其中this代表Vue对象]
methods:{
方法名:function(){ //代码... }
}
双向绑定: --> 通过指令 v-model --即修改一方同时修改相同的另一方,达到数据同时更新
案例:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html lang="en">
<head>
<title>Vue入门_helloworld</title>
<!--通过外链方式引入vue.js 注意:Vue就是一个全局变量-->
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<!--①创建一个html元素-->
<div id="zq">
<!--③使用{{ }}}-->
{{person}} <br>
{{person.age}} <br>
{{sex}}
<br>
{{sayName()}}
{{whatColor('pink')}}
<br>
<!-- 双向绑定 -> 通过指令: v-model-->
<input type="text" name="name" v-model="sex"><br>
</div>
<script type="text/javascript">
/*②创建一个vue对象,挂载到指定的html标签上 data:表示数据 注意:只作用在当前挂载的标签中 */
var v = new Vue({
el:"#zq",
data:{
person:{
name:"郑清",
age:20
},
sex:"男"
},
methods: { //vue对象方法
sayName: function () {
console.debug(this.person.name) //this表示当前vue对象
},
whatColor: function (color) {
console.debug(color)
}
}
});
// alert(v.sex)
v.sex="性别被修改了";
v.person.name="名字被修改了...";
v.sayName(); // js调用
</script>
</body>
</html>
效果图:
VueJS表达式
Vue指令:
v-text=“表达式” 设置标签中的文本
v-html 设置标签中的html
v-if 判断条件
v-for 循环
v-bind: 绑定属性或对象
v-show: 判断表达式的值,true则显示,false则隐藏
v-model 数据双向绑定
v-on 注册事件
v-bind 简写 : ex: v-bind:src 简写之后是 :src
v-show
v-if
v-on
v-model