vue基础语法

一个简单的vue实例1.进入vue官网:https://cn.vuejs.org/v2/guide/installation.html两种方法;1)点击开发版本,进入vue.js,复制到自己的文件夹,主页里引入2)直接引入cdn注:<scriptsrc="js/vue.js"></script>放在head标签之间,避免抖屏。<head><metachar...

vue基础语法

一个简单的vue实例

1.进入vue官网:

https://cn.vuejs.org/v2/guide/installation.html

两种方法;1)点击开发版本,进入vue.js,复制到自己的文件夹,主页里引入2)直接引入cdn

注:<script src="js/vue.js"></script>放在head标签之间,避免抖屏。

<head><meta charset="utf-8"<title>Vue入门</title><script src="./vue.js"></script><body> <div id="root">{{msg}}</div> <script>new Vue({  el:"#root",data:{ msg:"hello world"}})</body>el: "id的值",//引用id的值,Vue通过el与属性值root进行绑定msg:"输出值"可直接填写任意输出值注意vue实例里不同属性用逗号隔开

2.挂载点,模板与实例之间的关系

挂载点:指的是Vue实例下中el属性对应的""中的id所对应的dom节点(div),即代码中el对应id的HTML标签

模板:指的是在挂载点内部的这些内容都称作模板内容,可以写在挂载点内部也可以写在实例里的template中

实例:即newVue中,Vue会结合模版和数据生成最终要展示的内容,然后把放在挂载点之中

3.vue实例中的数据,事件和方法

  1. {{number}}:插值表达式,也就是把number的值插入到h1之中;

  2. v-text="number":h1的内容由number这个变量决定,v-text是Vue中的一个指令,这个指令里面的东西跟着的是一个变量,它告诉h1显示的内容就是"number"这个变量;

  3. v-html="c ontent":v-html与v-text的区别是,v-html不会转义,而v-text会转译;

  4. v-on:click="handleClick":通过v-on给元素绑定一个Click事件,事件触发方法。

    v-on:click简写是@click
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="./vue.js"></script> <title>Vue入门</title></head><body> <div id="root">  <div @click="handleClick">{{content}}</div> </div> <script>  new Vue({el: "#root",data: {  content: "hello"},methods: { handleClick: function() { this.content = "world" }}  }) </script> </body> </html>
    View Code
<body> <div id="root">  <div @click="handleClick">{{content}}</div> </div> <script>  new Vue({el: "#root",data: {  content: "hello"},methods: { handleClick: function() { this.content = "world" }}  }) </script> </body>//点击hello变为world,//{{content}}可以写为<div v-text="content"></div>
//new Vue中的this是指这个 Vue实例 ,指它自己

4.vue中的属性绑定和双向数据绑定

1)属性绑定

v-bind:title="title" ,双引号里面的是JS表达式,其中“”中的title指的是data里的title

2)双向绑定

单项绑定:数据决定页面的显示,但是页面无法决定数据的内容

v-model:双向数据绑定,随着数据的修改与之对应的也会修改。

//v-bind:title="title"可以缩写成,
:title="title"
//可以加入js表达式
v-bind:title="'gege lee' title"





<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>属性绑定和双向数据绑定</title> <script src="./vue.js"> </script></head><body> <div id="root"> <div :title="'dell lee'title">hello world</div> <input v-model="content"/> <div>{{content}}</div> </div> <script> new Vue({el:"#root",data:{ title:"this is hello world", content:"this is content"} }) </script></body></html>

5.vue的计算属性和侦听器

1)计算属性(computed)

一个属性通过其他属性计算而来

计算属性 computed:{fullName: function() {return this.firstName" "this.lastName;  }}computed 有缓存的功能 

2)侦听器(watch)

指的是监听某一个数据或计算属性发生了变化,然后就在监听器里面做业务逻辑

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>计算属性和侦听器</title> <script src="./vue.js"></script></head><body> <div id="root">  姓:<input v-model="firstName"/>  名:<input v-model="lastName"/>  <div>{{fullName}}  </div>  <div>{{count}}</div> </div> <script> new Vue({  el:"#root",  data:{  firstName:'',  lastName:'',  count:0  },  computed:{fullName:function(){ return this.firstName ' ' this.lastName}  }  ,watch:{fullName:function(){ this.count  }  } }) </script> </body></html>

6.v-if ,v-show,v-for指令

v-if: 控制dom的存在与否,对应data中的值show是true时显示,为false,则把这个标签就移除。

v-show :控制dom的显示与否,v-show 只是切换display的一个属性,当对应指令值show为false时,div标签会隐藏,就会把div标签的display属性变成none,如果需要频繁的的切换标签展示状态,则用v-show

v-for :循环展示dom结构

用v-for去渲染li标签时,需要绑定一个key属性,这样会加快渲染的速度,可以直接用item来作为他的值,key值不能相同,所以如果内容是相同的就不能直接用内容作为key值了,可以直接用index作为key值。但是如果需要对列表进行排序的变更的话,也不能用index。
v-for="(item,index) of list":key="index"
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>v-if ,v-show,v-for指令</title> <script src="./vue.js"> </script></head><body> <div id="root">  <div v-show="show">hello world</div>  <button @click="handleClick">toggle</button>  <ul><li v-for="(item,index) of list":key="index">{{item}}</li>  </ul> </div> <script>  new Vue({el:"#root",data:{ show:true, list:[1,2,3]},methods:{ handleClick:function(){  this.show=!this.show; }}  }) </script></body></html>
源文地址:https://www.guoxiongfei.cn/cntech/24341.html
0