vue框架

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue框架相关的知识,希望对你有一定的参考价值。

1.声明方法:
new Vue({
......
})
一、在Vue对象中有很多常用的选项,
1.el 表示Element,用于控制Vue指定的元素。
2.data vue的所有的数据都是放在data里面的,data的内容也是对象,通过data里面的数据可以实现双向绑定。
data:{
}
3.method method用于存放方法,它的内容也是对象,需要将对象声明称方法。常见的情况就是用来处理事件函数。
<div v-on="doSth"></div>
<script>
new Vue({
el:"#app",
data:{
message:"hello"
},
method:{
doSth:function(){
......
}
}
})
</script>
在这里通过一个指令,也就是v-on来绑定了一个点击事件,也可以通过缩写"@click"来绑定事件。
4.watch 可以用来监听,当监听的对象改变时,watch就会执行。
watch:{
‘a‘:function(){
......
}
}
二、模板指令
1.v-text,v-html:用于数据渲染,二者的区别与jQuery中的.html和.text相似。
2.v-if,v-show:用于控制模块显示和隐藏。不同的是,v-if直接移除元素,v-show通过display:none来隐藏元素。
3.v-for:渲染循环列表,通过in关键字,类似于加强版的for循环,v-for="book in books",这里,book是循环时使用的变量,books是在
data中定义的数据。
4.v-on(@):绑定事件。
5.v-bind:属性绑定。比较常用在class和src上,所以这两个属性可以简写,:class,:src="{key:code}:如果以对象的形式写,前面的key值就是
class本身的值,后面用于判断这个class是否展现,如果以数组的形式,则显示data中的数据。
总结:new一个vue对象的时候,可以设置它的属性,最常用的属性是data,method和watch
data代表vue对象的数据,method是vue对象的方法,watch设置了对象的监听方法。
vue对象里面的设置通过html指令进行关联。
常用的指令包括:v-text渲染数据
v-if控制显示
v-on绑定事件
v-for循环渲染等。<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <input v-model="message"/>
    </div>
    <div id="app2">
        <span v-bind:title="message">
        <!--通过bind将message和title绑定在一起,当message改变时,title属性值也会改变,当鼠标悬浮在下面这段话上面时,会自动显示当前的系统时间-->
Hover your mouse over me for a new seconds to see my dynamically bound title </span> </div> <div id="app3"> <p v-if="seen">Now you see me</p> </div> <div id="app4"> <p v-show="show">Now you see me</p> </div> </body> <script> var demo = new Vue({ el:"#app", data:{ message:"hello world" } }); var app2 = new Vue({ el:"#app2", data:{ message:You loaded this page on + new Date() } }); var app3 = new Vue({ el:"#app3", data:{ seen:false } }); var app4 = new Vue({ el:"#app4", data:{ show:false } }); </script> </html>
在这个例子中使用了基本的数据渲染,双向绑定和模块显示/隐藏。这里要注意v-if和v-show的区别,v-if会直接隐藏元素,并且元素的位置也会消失,v-show通过display:hidden;的方法来隐藏模块。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
    <style>


    </style>
</head>
<body>
    <div id="book">
        <ul id="books" v-for="book in books">
            <li>{{book.id}}</li>
            <li>{{book.name}}</li>
            <li>{{book.author}}</li>
            <li>{{book.price}}</li>
        </ul>

        <div id="addBook">
            <h1>添加书籍</h1>
            <div class="name">
                <label for="">书名</label><br/>
                <input type="text" v-model="book.name"/>
            </div>
            <div class="author">
                <label for="">作者</label><br/>
                <input type="text" v-model="book.author"/>
            </div>
            <div class="price">
                <label for="">价格</label><br/>
                <input type="text" v-model="book.price"/>
            </div>

            <input type="button" id="add" @click="addBooks" value="添加"/>
            <input type="button" id="remove" value="删除" @click="remove(book)"/>
        </div>
    </div>

</body>
<script>
  new Vue({
        el:"#book",
        data:{
            book:{
                id:0,
                author:‘‘,
                name:‘‘,
                price:‘‘
            },
            books:[
                {
                    id:1,
                    author:"曹雪芹",
                    name:"红楼梦",
                    price:32.0
                },{
                    id:2,
                    author:"施耐庵",
                    name:"水浒传",
                    price:30.0
                },{
                    id:3,
                    author:"罗贯中",
                    name:"三国演义",
                    price:24.0
                },{
                    id:4,
                    author:"吴承恩",
                    name:"西游记",
                    price:20.0
                }
            ]
        },
      methods:{
          addBooks:function(){
              this.book.id = this.books.length + 1;
              this.books.push(this.book);
              this.book = ‘‘;
          },
          remove: function (book) {
              this.books.$remove(this.books[0]);
          }
      }
    });

</script>
</html>
这个例子中,首先使用v-for来进行循环渲染,循环输出books中的数据,通过v-model将data中的book与input的内容进行了双向绑定,这样在我们改变input框中的内容时,数据会同时更新到book中,然后在vue的methods属性中,定义了addBooks方法,首先计算出新添加的书的id,然后通过push方法将当前的book添加到books数组中,然后将book清空,以便下一次添加操作。在删除按钮中有一个特殊符号"$"这是代表接下来的remove是数组的自带方法,不是data数据。

 



以上是关于vue框架的主要内容,如果未能解决你的问题,请参考以下文章

前端Vue.js框架是啥?

vue UI框架对比

VUE框架

vue框架官网悬浮头部怎么做

vue框架

vue框架是用哪句话体现的