关键词:
用到的前台编程工具是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基础——html版的vue入门基础(代码片段)
文章目录1、Vue两大特性2、vue指令2.1、内容渲染指令(1)`v-text`(2)``:插值表达式(3)`v-html`2.2、属性绑定指令使用Javascript表达式2.3、事件绑定指令(1)事件内置的变量ÿ 查看详情
vue基础——html版的vue入门基础(代码片段)
文章目录1、Vue两大特性2、vue指令2.1、内容渲染指令(1)`v-text`(2)``:插值表达式(3)`v-html`2.2、属性绑定指令使用Javascript表达式2.3、事件绑定指令(1)事件内置的变量ÿ 查看详情
vue基础——html版的vue入门基础(代码片段)
文章目录1、Vue两大特性2、vue指令2.1、内容渲染指令(1)`v-text`(2)``:插值表达式(3)`v-html`2.2、属性绑定指令使用Javascript表达式2.3、事件绑定指令(1)事件内置的变量ÿ 查看详情
vue基础——单网页版的vue学习基础(代码片段)
文章目录1、vue-cli1.1、什么是vue-cli1.2、vue-cli安装2.、vue项目结构和运行2.1、vue项目目录结构2.2、vue项目的运行流程2.3、运行命令3、Vue组件(components)3.1、私有子组件3.2、全局组件3.3、单行(一行)方法的简写3.3.1... 查看详情
vue基础——单网页版的vue学习基础(代码片段)
文章目录1、vue-cli1.1、什么是vue-cli1.2、vue-cli安装2.、vue项目结构和运行2.1、vue项目目录结构2.2、vue项目的运行流程2.3、运行命令3、Vue组件(components)3.1、私有子组件3.2、全局组件3.3、单行(一行)方法的简写3.3.1... 查看详情
vue基础——单网页版的vue学习基础(代码片段)
文章目录1、vue-cli1.1、什么是vue-cli1.2、vue-cli安装2.、vue项目结构和运行2.1、vue项目目录结构2.2、vue项目的运行流程2.3、运行命令3、Vue组件(components)3.1、私有子组件3.2、全局组件3.3、单行(一行)方法的简写3.3.1... 查看详情
vue基础篇二(代码片段)
Vue组件组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,是可复用的Vue实例.组件的注册//html代码<divid="app"><my-component></my-component></div>//js代码Vue.component(‘my-component‘,template:‘&l 查看详情
vue基础特性(代码片段)
在这里我们主要是讲解一些vue实例的属性和一些基础的指令vue实例属性:其实和我们之前所学的对象的属性是相似的东西 vue的基础指令: 对于指令,大家可能之前么有接触过相关的概念,其实大家可以这样理解指令:可以看做... 查看详情
vue的基础语法(代码片段)
------------恢复内容开始------------1、Vue的简单模板<divid="app"><h1>msg</h1></div><script>//2.创建一个vue实例对象constMyVue=newVue(//3.告诉vue对象需要控制的界面上的区域el:"#app",//4.告诉vue实例对象,控制区域内的数 查看详情
vue基础知识(代码片段)
目录vue基础helloVue.模板语法-文本语法文本模板语法-属性使用JavaScript表达式条件指令v-ifv-show指令列表渲染基本用法对象循环输出key事件处理方法事件修饰符侦听器对象变化监听自定义指令vue基础Vue.js的定位是一个渐进式框架前... 查看详情
前端-vue基础1(代码片段)
Vue核心思想:只要改变数据,页面就会发生改变1.引入vue1.下载vue.js2.在script标签的src属性中,引入vue.js<scriptsrc="js/vue.js"></script>2.vue实例el:vue接管的div元素,注:只能接管一个div,所有需要vue处理的,必须写在这个div中... 查看详情
vue.js基础(代码片段)
vue.js引入vue.js文件:vue的基本语法?触发事件?一个小代码:效果图:提出问题?怎么使用data中数据?怎么使用methods中函数?1.vue.js是引入vue文件才可以使用vue.js引入vue.js文件:官网的外部文件<scriptsrc="https://cdn... 查看详情
vue全家桶之vue基础指令(代码片段)
✍、目录总览🔥Vue🔥🔥Vue全家桶地址🔥Vue全家桶之Vue基础指令(一)https://blog.csdn.net/Augenstern_QXL/article/details/120117044🔥Vue全家桶之Vue组件化开发(二)https://blog.csdn.net/Augenstern_QXL/arti 查看详情
39.vue基础(代码片段)
环境搭建node.js安装https://nodejs.org/en/cnpmnpminstall-gcnpm--registry=https://registry.npm.taobao.orgcpnm全局安装vue-clicnpminstall-gvue-cli 目录下创建一个基于webpack模板的新项目vueinitwebpackmy-first-project设置项目 查看详情
vue组件基础(代码片段)
gitHub地址:https://github.com/huangpna/vue_learn里面的lesson06一vue组件基本实例 举个例子:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>app1</title></head&g 查看详情
vue基础(代码片段)
1.搭建项目架构:项目采用Webpack+Vue-router的架构方式,开始安装(全部在windows系统上操作,我也没有mac电脑)。1.按Win+R,然后在文本框中输入cmd,回车打开命令行,输入vue-cli安装命令: npminstall-gcnpm--registry=https://registry.npm.t... 查看详情
vue基础篇---vue组件《2》(代码片段)
定义全局组件我们通过Vue的component方法来定义一个全局组件。<divid="app"><!--使用定义好的全局组件--><counter></counter></div><scriptsrc="./node_modules/vue/dist/vue.js"></script><scripttype= 查看详情
vue基础2(代码片段)
1.vuecli简介VueCLI致力于将Vue生态中的工具基础标准化VueCLI是一个基于vue.js进行快速开发的完整系统,是一个全局安装的npm包,基于webpack构建,丰富的官方插件集合,集成了前端生态中最好的工具,一套完全图形化的创建和管理Vue... 查看详情