随笔- 310  文章- 1  评论- 0  阅读- 85781 
vue 基本语法

新建Vue对象

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="firstVue">
     {{msg}}
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#firstVue",
        data:{
         msg:"hello world"
        }
         
    })
</script>
</html>
 
1).js变量 myVue 就是Vue创建的一个对象，可以理解成把<div id="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象， 这个对象就是myVue
2).el是Vue的保留字，用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器，告诉Vue要实例化ID=“firstVue”的这个标签

数据绑定

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
VUE这个框架的数据流向是单向的，数据绑定后的数据流向是从vue实例——>DOM文档的
<body>
    <div id="firstVue" v-bind:hidden="my_hidden">
    {{my_data}}
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el:"#firstVue",
        data:{
            my_data: "test",
            my_hidden: "hidden"
        }
    })
</script>
 
 
1).data参数用来绑定VUE实例的数据变量，每个不同变量之间用逗号分隔，上面我们绑定了自定义变量my_data，并赋初值'test'
2).完成数据绑定工作，<div>标签里的{{myData}}数据会随着myVue实例里的myData数据的变动而变动，浏览器查看当前页面,会出现'test'字符串，说明数据绑定成功
3).如果想绑定某个HTML标签的属性值，就要用到v-bind:属性了，比如我想绑定一个标签是否可见的属性(hidden),v-bind:后面写想要绑定的属性，my_hidden也不需要用两个大括号括起来了
注：
v-bind由于经常会用到，所以也可以缩写成冒号:，比如上面的<div>标签就完全可以这样写
<div id="firstVue" :hidden="my_hidden">{{my_data}}</div>

事件绑定

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
v-bind:是用来绑定数据的，v-on:则是用来绑定事件
<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
        <button v-on:click="clickButton">Click Me</button>
        <p>{{my_data}}</p>
        <p v-if="seen">现在你看到我了</p>
    </div>
</body>
<script type="text/javascript">
var myVue = new Vue({
    el:'#firstVue',
    data:{
        my_data: "test",
        my_hidden: "hidden",
        seen:true,
    },
    methods:{
        clickButton:function(){
            this.my_data = "Wow! I'm changed!"
        }
    }
})
</script>
</html>

　

注：v-on:语法同样有一个缩写@，比如v-on:click="clickButton"就等价于@click="clickButton"
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

表单控件绑定

从DOM中实时获取用户输入的数据赋值给vue，使用v-model 通过两步实现了数据反向传递
第一步，绑定了DOM标签的input事件(比如叫tapInput())
第二步，当用户进行输入时候，触发tapInput()函数，tapInput()函数内部读取此DOM标签的Value值，赋值给vue实例

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
        <input type="text" v-model="my_data" />
        <button v-on:click="clickButton">Click Me</button>
        <p>{{my_data}}</p>
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el:'#firstVue',
        data:{
            my_data: "test",
            my_hidden: "hidden"
        },
        methods:{
            clickButton:function(){
                this.my_data = "Wow! I'm changed!"
            }
        }
    })
</script>
</html>

　

这里增加了一个<input>标签，并且用v-model语法绑定了之前定义的变量my_data，当我们在<input>输入框输入值的时候，v-model会实时将最新值(value)赋值给vue实例的my_data变量，而my_data变量又将实时展现在<p>标签中
数据流:
DOM1(input标签)——>VUE——>DOM2(p标签)

组件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
Vue.component('button-demo',{
        template:'<button>Hello button-demo!</button>'
    });
    //注册了'button-demo'以后，<button-demo></button-demo>就等价于<button>Hello here!</button>
 
//定义button-counter组件
    Vue.component('button-counter',{
        //定义数据
        data:function(){
            return {
                count: 0
            }
        },
        //定义方法
        methods:{
            clickAdd: function(){
                this.count++
            }
        },
        template :'<button @click="clickAdd">You clicked me {{count}} times</button>'
 
    });
 
</script>
 
<body>
    <button-demo></button-demo> 
    <button-counter></button-counter>   
 
      
</body>

条件判断

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//v-if 、v-else-if、v-else
 
<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
     
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

v-show　

?
1
2
v-show 指令来根据条件展示元素
<h1 v-show="ok">Hello!</h1>

循环使用 v-for 指令

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
  
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

　　

 

 posted on   boye169  阅读(21)  评论(0)  编辑  收藏  举报
相关博文：
· vue-组件
· vue实例
· vue基础
· Vue基础知识一
· 2. Vue模板语法 && 数据绑定
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
历史上的今天：
2021-07-10 python web模板 jinja2
点击右上角即可分享
微信分享提示
AI IDE Trae