vue基础
Posted mr-simple001
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基础相关的知识，希望对你有一定的参考价值。
用到的前台编程工具是Visual Studio Code，暂时是官网下载vue.js到本地使用
一、Visual Studio Code需要安装的插件：
jshint ：js代码规范检查
Beautify ：一键美化代码插件
Vetur: .vue 文件识别插件
javascript(Es6) code snippets :Es6语法提示
Auto Rename Tag :自动命名标签，标签成对出现
Auto Close Tag: 自动闭合标签
vue helper :一些vue代码的快捷代码插件
vscode-icons:提供不同文件夹的显示区别
按下ctrl+k 在按下ctrl+s 可以查看快捷键
初次体验
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="vue.js"></script> <title>01vue体验</title> </head> <body> <div id="app"> <P>{{username}}</P> <p>{{greet()}}</p> <button @click="username=‘李四‘">改名字</button> </div> <script> new Vue({ el:"#app", data:{ username:"张三" }, methods:{ greet(){ return "你好" } } }) </script> </body> </html>
二、Vue模板语法
1.v-once加上之后不会改变原来的值
2.v-html读取变量的时候会当做HTML元素来解析
3.v-bind属性绑定，要读取vue.data中的属性，就要使用这个v-bind，也可以省略使用如：<img v-bind:src="logo" >或者<img :src="logo" >
小插曲：设置自己的代码快捷方式：
a.ctrl+shift+p 搜索snippets 点击第一个之后找到html.json打开
b.按照说明操作就可以了----zyb
4.绑定Class
a.通过数组的方式绑定：
<div id=‘app‘> <p v-bind:class="[pcl1,pcl2]">张三</p> </div> <script> new Vue({ el:‘#app‘, data:{ pcl1:"title", pcl2:"main-title", } }) </script>
b.通过对象的当时绑定：
<div id=‘app‘> <p :class="{title:strong1,‘main-title‘:strong2}">哈哈哈</p> <button @click="strong=true">文字加粗</button> </div> <script> new Vue({ el:‘#app‘, data:{ strong1:false, strong2:false } }) </script>
5.绑定Style：
a.用对象的方式绑定：
<div id=‘app‘> <p :style="{backgroundColor:backgroundColor}">我爱你，中国</p> </div> <script> new Vue({ el:‘#app‘, data:{ backgroundColor:"red" } }) </script>
b.通过数组的方式绑定：
<div id=‘app‘> <p :style="[pStyle1,pStyle2]">我爱你，中国</p> </div> <script> new Vue({ el:‘#app‘, data:{ backgroundColor:"red", pStyle1:{ ‘background-color‘:"blue", ‘font-size‘:"30px" }, pStyle2:{ ‘border-bottom‘:"20px solid #000" } } }) </script>
6.JavaScript表达式：
在属性绑定和变量读取中，可以使用表达式，常见的表达式有：变量读取，变量运算，三目运算符，函数调用，取反等。代码如下：
<div id=‘app‘> <div :style="{color:danger?‘red‘:‘black‘}">三目运算符执行：{{message.split(" ").reverse().join(" ")}}</div> <!--split分割，reverse翻转，join数据转字符串--> <div>调用方法的执行结果：{{greet()}}</div> <div>这个是！取反的：{{!istest}}</div> </div> <script> new Vue({ el:‘#app‘, data:{ //条件？条件成立的值：条件不成立的值---三目运算符 danger:true, message:"hello word", istest:true }, methods:{ greet(){ return "自己定义的函数要放在methods中," } } })
7.条件判断：有v-if,v-else-if,v-else。如果有多个元素渲染要用template标签，vue默认会重用相同标签，入过不想被重用加上key属性。
a.单个标签显示的：
<div id=‘app‘> <p v-if="tianqi==‘sun‘">钓鱼</p> <p v-else-if="tianqi==‘rain‘">打游戏</p> <p v-else>睡觉</p> </div> <script> new Vue({ el:‘#app‘, data:{ tianqi:"rain" } }) </script>
b.多个标签显示的：
<div id=‘app‘> <template v-if="age<18"> <p>第一个模板</p> <p>第二个模板</p> </template> <template v-else-if="age>=18"> <p>第三个模板</p> <p>第四个模板</p> </template> </div> <script> new Vue({ el:‘#app‘, data:{ age:4 } }) </script>
以上是关于vue基础的主要内容，如果未能解决你的问题，请参考以下文章