网站建设多长时间能学会,做网站猫要做端口映射吗,有网站的源代码如何做网站,受欢迎的合肥网站建设创建vue项目之后我们就可以开始写代码了#xff0c;我们的代码一般都会写在src目录-components目录-HelloWord.vue文件内。
我们之前写的HTML文件的结构是HTML代码可以集成或者连接外部的css/js文件。 我们通过vue建立的项目#xff0c;它的结构是在一个vue文件内集成了HTML…创建vue项目之后我们就可以开始写代码了我们的代码一般都会写在src目录-components目录-HelloWord.vue文件内。
我们之前写的HTML文件的结构是HTML代码可以集成或者连接外部的css/js文件。 我们通过vue建立的项目它的结构是在一个vue文件内集成了HTML、css、JavaScript的代码。包含三个部分templatescriptstyle scoped分别对应HTML代码、JavaScript代码、css样式 模板语法
插值
模板语法我们使用的是{{}}双花括号来进行插值的。
对比我们之前如果要修改元素的值就需要先获取对象。通过对象的属性去修改而vue则是可以通过模板语法来进行修改。
template
p{{name}}/p
p{{age}}/p/templatescript
export default {data(){return {name:xxx,age:18}}
}
/scriptstyle scoped/style这里首先我的p标签里面的两个{{}}表明了我需要两个数据一个是name一个是age
然后script部分我通过return语句返回了name和age两个变量给它它接收到之后渲染到页面中 {{}}里面可以写变量和表达式。假如我传递了一个变量num它的值是100
我{{}}里面可以填写num*10这个表达式或者num ? 10:100问号表达式又或者是逻辑表达式ab这种。但是我不能写一个if语句或者for语句 渲染html代码类似于innerhtml
如果我有一个code:a hrefhttps://www.baidu.com百度/a需要渲染到HTML文件中
如果我直接使用刚才讲的{{}}那最后出现的结果就是HTML文件被原样写道里面而不会被解析。
这个时候我们就需要使用v-htmlcode我们把这个HTML代码正确渲染到页面中
下面我们来看代码演示
//这是使用{{}}
templatep{{code}}/p/templatescript
export default {data(){return {code:a href https://www.baidu.com百度/a, }}
}
/scriptstyle scoped
/style//这是使用v-html
templatep v-htmlcode/p/templatescript
export default {data(){return {code:a href https://www.baidu.com百度/a,}}
}
/scriptstyle scoped
/style
他们的显示结果如图所示
这里我们可以发现使用v-html可以正常的渲染我们所需要的HTML标签而{{}}是给什么就显示什么 渲染属性
我们标签的class、id、data-都是属性的一种。我们可以通过v-bind:class/id来设置
我们通过例子来学习
template
p v-bind:idid :classclassss :data-onedataone /p/templatescript
export default {data(){return {id:name,classss:name,dataone:one,}}
}
/scriptstyle scoped/style 通过网页源代码我们可以看到这些属性是正常被渲染上去了的。
语法格式就是 v-bind:class/id/data- 属性值这种方式而且v-bind: 可以只写一个冒号 : 来代替 条件渲染
条件渲染就是根据不同的情况来渲染不同的界面
v-ifv-else
大家发现没有到现在我们所学的除了插值之外的所有语法都是以类似于标签的属性的语法来写的
v-if也是如此它会根据“属性值”的布尔值来判断是否渲染该标签。
我们来看一个例子
template
p v-ifflag可以输出imok/p/templatescript
let a 10
let b 11export default {data(){return {flag:ab}}
}
/scriptstyle scoped/style这里我们首先声明了两个全局变量然后给它们赋值。判断它们是否是符合return返回的表达式
如果合理返回truev-if可以渲染。反之返回falsev-if不能渲染
我们也可以在v-if后面写一个表达式比如说我想写一个大于六十就渲染可以写v-if:num 60然后我只需要把num给他就好了。 既然有if那就要有else了
v-else和js的else差不多就是配对的if为false就执行else为true就不执行。关于v-if和v-else配对的问题这里也简单说一下。
v-else会自动配对上文中的最近的、处于同一父元素的v-if
p v-ifflag可以输出imok/p
p v-elsebukeyila/pp v-elsebuke222222222222a/p这段代码虽然有两个v-else但是它们都会被匹配到上文的v-if
div
p v-ifflag可以输出imok/p
p v-elsebukeyila/p
/divp v-elsebuke222222222222a/p这段带码就不会出现两个v-else匹配同一个因为它直接报错了。主要原因就是前面的v-else与v-if处于同一父元素下所以它们会配对但是不在同一父元素下的哪个v-else就会因为找不到匹配的v-if而报错 v-else-if
这个就是else ifv-if判断不成功就会进入它再进行判断。相当于if嵌套
通过代码我们可以很轻松的理解 template
div
p v-ifflag10大于十/p
p v-else-ifflag5大于五/pp v-elseerror/p
/div/templatescript
let a 10
export default {data(){return {flag:a}}
}
/scriptstyle scoped/style这里返回的flag是a变量a它的值是10
然后我们会在v-if判断结果是flase然后跳转到v-else-if结果是true就会渲染对应的标签。这个就是把判断语句写入到了标签内。 v-show
单独的控制一个元素的显示与否。他与v-if用法一样但是区别在于v-if是条件为真才进行渲染v-show是不管条件真不真都会渲染他控制的是对应标签的css如display
我们在查看源代码的时候是可以看到v-show的标签的代码的但是v-if只有在条件为真才可以看到 v-for
v-for是循环渲染它会重复渲染所在的标签
我们依旧是通过代码来看
templateolli v-fori in 10{{i}}/li/ol
/template
在这段代码中我并没有接收什么数据我只是使用了一个i in 10给了v-for然后打印这个li标签。
最后的结果就是我打印出了十个有序列表。然后i的数值是从1到10 这是我确认循环多少次也可以把10换成一个变量
templateolli v-fori in num{{i}}/li/ol
/template
script
export default {data(){return{num:10,}}}
/script
style/style
大致就是这个样子当然。num也可以是数组我们可以通过传递数组来遍历。
templateolli v-fori in arr{{i.name}}/li/ol
/template
script
export default {data(){return{arr:[{name:xxx},{name:yyy},{name:yyx},{name:yxx},]}}}
/script
style/style
这里我们传递了一个数组arr它里面每一个元素都是一个对象。我们通过这个来访问对象里面的信息。
i in arr循环数组内每一个元素i.name就是循环到元素的name属性。这里我们要注意的是使用v-for会根据循环的次数创建相应个数的标签。而且如果arr数组新加了几个元素它并不会把所有的都重新渲染一遍。而是添加渲染新加入的元素。 key
这个的作用是用于确认每一条代码的唯一性也是为了预防一些错误的发生。我们在写数据的时候最好是给它们都设置上唯一的一个标识id。
它的使用语法是v-fori in arr :keyi.id 这就需要我们为数据们添加一个id 事件处理
添加事件监听事件
使用的是v-on或者简写成
templatebutton v-on:clickcont{{cont}}/button
/template
script
export default {data(){return{cont:0}}}
/script
style/style 在这段代码中我们的按钮添加了一个v-on它绑定的事件是单击。对应的处理是cont然后把cont实时渲染到按钮上
还有就是事件监听触发函数这个函数我们就不能在data里面写了。函数有专门写它的地方 在data下面再写一个methods:{} 打括号里面填写方法
export default {data(){//数据部分return{cont:0}},methods:{//函数部分a:function (){alert(nihao)},meth(){console.log(meth)}}}
如果想调用函数就可以这样写clicka点击触发a函数
如果我们想通过点击按钮来改变data里面的值就需要借助this了。我们通过一个简单的例子来学习
templatebutton v-on:clickmeth1/button//点击调用meth函数p{{cont}}/p//渲染cont/template
script
export default {data(){return{//传递值cont:0}},methods:{meth(){//让data里面的cont自增this.cont}}}
/script
methods里面的函数也是有event对象的。这个event和事件监听处理函数里面的event是一样的
参数传递。我们可以通过在写函数的时候meth(code)来声明它有一个形参code然后在事件监听函数的处理函数里面传递实参:clickmeth(hello)这个参数就会传递给meth函数里面的形参code
template
div classhellobutton clickleijia/button//点击触发leijia函数hrbutton clickgetnum(cont)getnum/button//点击触发getnum函数并且传递一个cont实参
/div
/template
script
export default {name: HelloWorld,data(){return {cont:0,}},methods:{leijia(){//累加函数this.cont;},getnum(a){//获取数字用的函数alert(the number of conts is ${a});//这里可以改成打印this.cont}}
}
/script
这个例子主要是为了让大家理解函数传参与不传参的写法 表单输入绑定
表单一直是前端比较重要的一个东西我们来看一下表单输入绑定.我们使用v-model把表单元素的数据绑定到指定的变量上。它其实是绑定数据和监听输入的结合语法糖
我们通过简单的例子来看
template
div classhelloinput typetext v-modelstrspan{{str}}/span
/div
/template
script
export default {name: HelloWorld,data(){return {str:}},methods:{}
}
/script
我们给输入框添加了一个v-model属性并绑定了str变量。当我们输入数据的时候v-model会把数据写给str。然后span标签又会把数据渲染出来。
但是我们如果每次输入都要获取数据并且渲染的话是很麻烦的所以就引入了v-model的修饰符 v-model.lazystr这个的作用是我们输入的时候不会每次有新的内容都会渲染而是按下回车键或者失去焦点的时候才会渲染
如果我们需要过滤掉用户输入的首尾空白字符就需要v-model.trim来进行修饰.它会去掉输入的数据开头和结尾的空白字符但不会过滤掉数据中间的空白字符
修饰符是可以连用的v-model.trim.lazy也是可以的
