Vue.js基本的语法一 - 好文

一、vue.js基本的语法

1.1vue.js是什么？

Vue.js（读音 /vjuː/，类似于 view 的读音）是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是，Vue
从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue
的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件
<https://vuefe.cn/v2/guide/single-file-components.html>和 Vue 生态系统支持的库
<https://github.com/vuejs/awesome-vue#components--libraries>结合使用时，Vue
也完全能够为复杂的单页应用程序提供有力驱动。

如果你想在深入学习 Vue 之前了解更多信息，我们创建了一个视频 <https://vuefe.cn/v2/guide/index.html#>
，完整地梳理了 Vue 的核心理念，以及配合一个示例项目讲解。

如果你是有经验的前端开发人员，想知道 Vue.js 与其它库/框架(library/framework)之间的对比，请查看对比其它框架
<https://vuefe.cn/v2/guide/comparison.html>。

1.2 首先我们先下载一个vue.js

网址：https://vuefe.cn/v2/guide/installation.html

点击开发环境下载文件：vue.js文件。

1.3首先了解一下，vue.js基本语法

v-model
<script src="js/vue.js" type="text/javascript"
charset="utf-8"></script>以后都要先引用这个<!DOCTYPE html> <html> <head> <meta
charset="UTF-8"> <title></title><script src="js/vue.js" type="text/javascript"
charset="utf-8"></script> </head> <body>  <div id="app"> <div>
 <input type="text" v-model="name"/>
 <span
v-show="name">你的名字：{{name}}</span> </div>
 <div> <input type="text" v-model="age"
/> <span v-show="age"> 你的年龄：{{age}}</span> </div> <div> <input type="text"
v-model="sex" /> <span
v-show="sex">你的性别：{{sex}}</span> </div> </div> </body> <script
type="text/javascript">//定义所有的数据都在这里 var app = new Vue({ //它是 DOM 元素中的
id，可以找到页面的指向 el:"#app", //用于定义属性， data:{ name:"a",//定义字符串初始值
age:10,//可定义number初始值 sex:null,//当不定义时会报错，但是当定义成null时，就是将初始值定义为空 },// 用于定义的函数
methods:{ } }) </script> </html>
上面显示了vue.js基本的一些语法和调用,实现了双向的绑定

就是当我们在框中输入内容的时候，外面的内容也会跟着变

1.3.1v-model的三个常用指令（好用，安全，功能全）

v-model.lazy：惰性更新，他不会马上的更新，只会当我们点击空白的时候会更新

v-model.trim：去掉前面的空格

v-model.number：将数据转化成数值型

1.3.2v-model 在其他元素及类型上的用法

我们之前就是直接用‘’name‘’中定义相同的名字实现单选
<div id="app"> <label> 男<input type="radio" name="sex" value="male" />
</label> <label> 女<input type="radio" name="sex" value="female" /> </label>
</div>
现在我们用v-model来实现单选框的选择
<body> <div id="app"> <label> 男<input v-model="sex" type="radio" value="male"
/> </label> <label> 女<input v-model="sex" type="radio" value="female" />
</label> {{sex}} </div> </body> <script type="text/javascript"> var app = new
Vue({ el:'#app', data:{ sex:'male', } }) </script>
现在我们用v-model来实现复选框的选择

当你选择的时候他会自动插入到数组中，当你勾选掉的时候又可以自动的删除，当然我们也可以在js的sex["male"]设置成默认值
<body> <div id="app"> <label> 男<input v-model="sex" type="checkbox"
value="male" /> </label> <label> 女<input v-model="sex" type="checkbox"
value="female" /> </label> {{sex}} </div> </body> <script
type="text/javascript"> var app = new Vue({ el:'#app', data:{ sex:[], } })
</script>

当我们在textarea中
<body> <div id="app"> <textarea v-model="article"></textarea> </div> </body>
<script type="text/javascript"> var app = new Vue({ el:'#app', data:{
article:'dgrehrthrtyujtyujetysfdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' }
}) </script>
当我们在select的时候，原来的方式是
<div id="app"> <div>你是</div> <select> <option value="1">男</option> <option
value="2">女</option> </select> </div>
当我们使用v-model时就可以轻松的设置默认值
<body> <div id="app"> <div>你是</div> <select v-model="sex"> <option
value="1">男</option> <option value="2">女</option> </select> {{sex}} </div>
</body> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{
//这个默认为空 // sex:null, //默认为男 sex:1, } }) </script>
这时我们想实现多选
<body> <div id="app"> <div>你是</div> <select v-model="sex"> <option
value="1">男</option> <option value="2">女</option> </select> {{sex}}
<div>你的爱好</div> <select v-model="hobby" multiple="multiple"> <option
value="1">吃</option> <option value="2">玩</option> </select> {{hobby}} </div>
</body> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{
//这个默认为空 // sex:null, //默认为男 sex:1, hobby:null, } }) </script>

1.4 v-for 循环语句指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script
src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body>
<div id="app"> <ul>  <li v-for="food in
foodList1">{{food.name}}:￥{{food.discount ? food.price*food.discount :
food.price}}</li> </ul> </div> </body> <script type="text/javascript"> var app
= new Vue({ el:"#app", data:{//迭代字符串的情况比较少， // foodList:['葱','姜','蒜'],
//迭代对象组成的数组比较多 foodList1:[ { name:"葱", price:13, discount:0.5, }, { name:"姜",
price:12, discount:0.5, }, { name:"蒜", price:11, discount:null, }, ], }, });
</script> </html>

1.5 v-bind 样式的绑定（当我们省略了v-bind时没有任何的区别这个是vue上人性化的一个快捷方式，功能上不受影像）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script
src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style
type="text/css"> .active{ background: palegoldenrod; } </style> <body> <div
id="app">  <a href="https://www.baidu.com/">点击</a>
 <a v-bind:href="url">点击</a>
 <a v-bind:href="url"><img v-bind:src="img"
/></a>  <a v-bind:class="anniu" v-bind:href="url">点击</a>
 <a
v-bind:class="{active:isActive}" v-bind:href="url">点击</a>
  </div> </body> <script
type="text/javascript"> var app = new Vue({ //它是 DOM 元素中的 id，可以找到页面的指向
el:"#app", //用于定义属性， data:{ url:"https://www.baidu.com/", img:"img/1.jpg",
//根据上面的v-bind:class="anniu"找到这个位置后，添加class的类名 anniu:"btn btn-default",
//根据上面的class传入对象的值v-bind:class="{active:isActive}"当这个值为真的情况下显示上面 isActive:true,
}, // 用于定义的函数 methods:{ } }); </script> </html>
1.6 v-on 事件处理器（

v-on
：可以替换成@） <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"
type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app">
<button v-on:click="onclick">点击</button> </div> </body> <script
type="text/javascript"> var app = new Vue({ el: '#app', methods: { onclick:
function() { console.log("dian"); } } }) </script>
一个元素绑定多个事件

当我们的鼠标进入按钮，滑出按钮时
<body> <div id="app"> <button v-on="{mouseenter:onEnter,mouseout:outEnter}"
v-on:click="onClick()">点我</button> </div> </body> <script
type="text/javascript"> var app = new Vue({ el: '#app', methods: {
onClick:function(){ console.log("你好"); }, onEnter:function(){
console.log("mouseenter"); }, outEnter:function(){ console.log("mouseout"); },
} }) </script>
这个是当我们点击提交的时候，控制台就可以输出submit
<body> <div id="app"> <button v-on="{mouseenter:onEnter,mouseout:outEnter}"
v-on:click="onClick()">点我</button> <form v-on:submit="onSubmit($event)"> <input
type="text" /> <button type="submit">提交</button> </form> </div> </body> <script
type="text/javascript"> var app = new Vue({ el: '#app', methods: {
onClick:function(){ console.log("你好"); }, onEnter:function(){
console.log("mouseenter"); }, outEnter:function(){ console.log("mouseout"); },
onSubmit:function(e){ //阻止点击调转链接，不会整页面的刷新 e.preventDefault();
console.log("submit"); }, } }) </script>

但是当我们这么做的时候还是觉得太麻烦了，这样vue.js为我们封装好了两个

一个是prevent：$event根据下面的e.preventDefault()就不会再整页的刷新了，和上面传入的$event一样，prevent就是阻止点击调转链接

一个是stop：除了prevent，还有stop就是停止冒泡事件的，意思就是到这里就行了，不要往上报了
<body> <div id="app"> <button v-on="{mouseenter:onEnter,mouseout:outEnter}"
v-on:click="onClick()">点我</button>

 <form
v-on:submit.prevent="onSubmit"> 
<input type="text" /> <button type="submit">提交</button> </form> </div> </body>
<script type="text/javascript"> var app = new Vue({ el: '#app', methods: {
onClick:function(){ console.log("你好"); }, onEnter:function(){
console.log("mouseenter"); }, outEnter:function(){ console.log("mouseout"); },
onSubmit:function(){ console.log("submit"); }, } }) </script>
当我们是一个键盘事件的时候
<body> <div id="app"> <button v-on="{mouseenter:onEnter,mouseout:outEnter}"
v-on:click="onClick()">点我</button>
 <form
v-on:keyup.enter="onKeyup" v-on:submit.prevent="onSubmit"> 
  <input type="text" /> <button
type="submit">提交</button> </form> </div> </body> <script type="text/javascript">
var app = new Vue({ el: '#app', methods: { onClick:function(){
console.log("你好"); }, onEnter:function(){ console.log("mouseenter"); },
outEnter:function(){ console.log("mouseout"); }, onSubmit:function(){
console.log("submit"); }, onKeyup:function(){ console.log("onKeyup"); }, } })
</script>

热门工具换一换