Vue学习笔记-day01

Vue学习笔记-day01

Vue笔记

  • vue官网:cn.vuejs.org

day01

1.(掌握)vue安装和初步体验vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
/*
    // 需要编译器
    new Vue({
   
    template: '<div>{
   { hi }}</div>'
    })

    // 不需要编译器
    new Vue({
   
    render (h) {
   
        return h('div', this.hi)
    }
    })

*/
ES6中: let (定义变量) / const(定义常量)

<div id="app">
    <button @click="add()">添加</button>
    插值表达式: {
   {
   num}}
    双向绑定:v-model
    <input type="text" v-model="msg"/>
</div>

new Vue({
   
    el:"#app",
    data:{
   
        num:0  ,
        msg:"hello vue"
    },
    methods:{
   
        add(){
   
            this.num ++;
        }
    }
});

vue 渲染式框架,数据和视图进行分离.MVVM模式

<!-- vue体验:计数器-->
<body>
		<div id="app">
			
			<input type="text" v-model="msg"/>
			{
  {msg}}
			<br/><hr color="red"/>
			
			当前技术:{
  {num}}
			<button @click="add()">+</button>
			
			<button @click="subtraction()">-</button>
		
		</div>
		<script> new Vue({
     el:"#app", data:{
     msg:"hello vue" ,num:0 }, methods:{
     add(){
     this.num++; }, subtraction(){
     this.num--; } } }) </script>
	</body>

2.(理解)vue的options选项

参考官方API文档:https://cn.vuejs.org/v2/api/#el

<body>
		<div id="app">
			
			<input type="text" v-model="msg"/>
			{
  {msg}}
			<br/><hr color="red"/>
			
			当前技术:{
  {num}}
			<button @click="add()">+</button>
			
			<button @click="subtraction()">-</button>
		
		</div>
		<script> new Vue({
     el:"#app", data:{
     msg:"hello vue" ,num:0 }, methods:{
     add(){
     this.num++; }, subtraction(){
     this.num--; } } }) </script>
	</body>

eldatamethods 表示vue的options。其他的选项参考官方api学习文档

3.(了解)vue生命周期

Vue学习笔记-day01

生命周期:created 页面加载的时候调用,但是没有渲染DOM节点.mounted 页面加载的时候调用。这个时候DOM已经渲染完了。

4.(掌握)Vue-指令

4.1 插值表达式

mustache语法就是双大括号{
{msg}}
,即插值语法;插值表达式里面做一些简单的运算.复杂的运算使用computed计算属性.

<body>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="app">
			 {
  {age>18?"成年":"未成年"}}
			 <hr color="red"/>
			 {
  {msg.split("-")}}	
		</div>
		<script> new Vue({
     el:"#app", data:{
     age:23, msg:"hello-vue" }, methods:{
     } }) </script>
	</body>

效果:

Vue学习笔记-day01

需要注意:在插值表达式中不能写js语句。比如{
{var a = 10 }}

4.2 v-once指令

只渲染元素和组件一次;不需要表达式, 直接将指令写在开始标签中即可

<body>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="app">
			<button @click="change()">改变msg内容</button>
			{
  {msg}}
			<hr color="red"/>
			<p v-once>{
  {msg}}</p>
		
		</div>
		<script> new Vue({
     el:"#app", data:{
     msg:"hello-vue", num:1 }, methods:{
     change(){
     this.num++; this.msg="hello-vue 的v-once指令"+(this.num); } } }) </script>
	</body>

效果:

Vue学习笔记-day01

4.3 v-html 和v-text指令

渲染文本里面的内容。但是需要注意v-html可以渲染内容里面的js代码,容易造成XSS脚本共计.


<div id="app">
    {
  {url}}
    <hr/>
    <h1 v-html="url"></h1>
</div>

<script> new Vue({
     el:"#app", data:{
     url:"<a href='http://www.baidu.com'>百度</a>" } }) </script>

4.4 v-pre指令

v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。跳过大量没有指令的节点会加快编译。

<span v-pre>{
  { this will not be compiled }}</span>

就会直接显示{
{this whill not be compiled}}

4.5 v-cloak

防止{
{}}进行解析闪动。cloak 中文意思表示斗篷.

<style> [v-cloak] {
     display: none; } </style>

<div v-cloak>
  {
  { message }}
</div>

4.6 v-bind 指令*****

v-bind 绑定标签的属性。是标签的属性。可以是绑定 classstyle 等都可以;

v-bind 可以简写为冒号”:”

1 .绑定基本属性
<div id="app">
	<img :src="url" />    
</div>

<script> new Vue({
     el:"#app", data:{
     url:"http://192.168.0.150/fasfasdfafsd.png" } }) </script>
2.绑定class对象语法
  • 对象语法

:class=“{类名:布尔值}” ,有布尔值觉得是否绑定类名.布尔值的数据来源data。

所谓对象语法就是说 :class=“{}”,在json中使用{}表示对象的。

<style> .ative{
     color:red; } </style>
<div id="app">
<p :class="{active:isactive}">
    hello vue
    </p>
    
</div>
<script> new Vue({
     el:"#app", data:{
     isactive:true } }) </script>
3.绑定style

绑定style的对象语法:

:style = “{key(属性名,样式的名字):value(属性值)”

 <div id="app">
        <div v-bind:style="{
      color: redColor, fontSize: font18}">
            文本内容
        </div>
    </div>
    <script src="./vue.js"></script>
    <script> var vm = new Vue({
     el: '#app', data: {
     redColor: 'red', font18: '18px' } }); </script>

xxxx

color 这里没有加单引号, value的值使用单引号。

在vue中key可以不用加单引号,但是value如果不加单引号,vue会把他当着是一个变量来处理.如果加上单引号转成样式的时候是没有单引号的。

.titil{

font-size:50px,

color:red;

}

4.7 v-for指令[循环指令]

循环指令.

  • 遍历数组.
<div id="app">
    <ul>
        <li v-for="(item,index) in boos">
        	{
  {index}}------{
  {item}}
        </li>
    </ul>
</div>
<script> new Vue({
     el:"#app", data:{
     boos:["Java","C#","python"] } }) </script>
  • 遍历对象。
<div id="app">
    
    
</div>
<script> new Vue({
     el:"#app", data:{
     } }) </script>

5.(掌握)计算属性

计算属性:computed,计算属性作为vue实例选项options之一。

<div id="app">
    <h2>
        {
  {fullName}}
    </h2>
</div>
<style> new Vue({
     el:'#app', data:{
     firstName:"hello", lastName:'vuejs' }, computed:{
     fullName(){
     return this.firstName+' '+this.lastName; } } }) </style>


  • 插值表达式里面还可以写方法
<div id='app'>
    {
   {getFullName()}}
</div>

<script> new Vue({
      el:"#app", methods:{
      getFullName(){
      return "hello"+" "+"vuejs"; } } }) </script>
  • 计算属性里面的方法必须要有返回值
<div id='app'>
    
</div>
<script> new Vue({
     el:'#app', }) </script>
  • ES6语法之循环
<div id='app'>
    {
   {totalPrice}}
</div>
<script> new Vue({
      el:'#app', data:{
      books:[ {
     id:110,name:"unix编程艺术",price:119}, {
     id:111,name:"代码大全",price:105}, {
     id:112,name:"深入理解计算机原理",price:98} ] }, computed:{
      totalPrice(){
      let totalprice=0; for(let i in this.books){
      totalprice +=this.books[i].price } return totalprice; } } }) /* //循环方式一: for(let i in this.books){ this.books[i] } //循环方式二: for(let book of this.books){ //book表示里面的一个对象 } */ </script>

day02

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100735.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • windows10安装cuda anaconda_电脑自带cuda吗

    windows10安装cuda anaconda_电脑自带cuda吗cuda10.2安装前言下载cuda10.2和cudnn查看本机驱动版本安装过程安装cudnn验证前言tensorflow1.12之后gpu使用cuda10.0对应的驱动,不要求安装cuda,[但pytorch要求安装cuda和cudnn(暂不确定)],如果本机的驱动版本小于cuda10.0对应的驱动版本,建议安装cuda10.x的驱动来覆盖本机的驱动,不用卸载再安装驱动下载cuda10.2…

  • 有符号,无符号数在字节拼接过程中的区别和注意

    有符号,无符号数在字节拼接过程中的区别和注意

  • 谷粒商城项目2——环境搭建、renren-generator逆向生成所有微服务基本CRUD代码[通俗易懂]

    谷粒商城项目2——环境搭建、renren-generator逆向生成所有微服务基本CRUD代码[通俗易懂]续接上文谷粒商城项目1——分布式基础概念、环境搭建_Kaisa..的博客-CSDN博客至此,环境搭建完成了,接下来就是分布式组件了目录二、环境搭建8.人人开源框架搭建(1).克隆项目初始环境(2).创建renren-fast后台管理系统数据库(3).配置renren-fast环境(4).前端环境搭建(5).测试登录9.renren-generator代码生成器(1).根据数据库逆向生成Bean、Mapper等(2).启动renren-generator(3).创建公共微服务模块导入逆向生成代码所需要的各种依

  • 什么是JPA_论文题目不能用浅谈吗

    什么是JPA_论文题目不能用浅谈吗定义JPA即JavaPersistenceAPI。JPA是一个基于O/R映射的标准规范(目前最新版本是JPA2.1)。所谓规范即只定义标准规则(如注解、接口),不提供实现,软件提供商可以按照标准规范来实现,而使用者只需按照规范中定义的方式来使用,而不用和软件提供商的实现打交道。JPA的出现有两个原因:简化现有JavaEE和JavaSE应用的对象持久化的开发工作;Sun希……

    2022年10月20日
  • 源码网_py即时通讯源码

    源码网_py即时通讯源码源码目录结构我们首先来看下models.py的代码结构我们可以看到这个模块中定义了12个属性和22个模型类,我们依次来看属性源码分析importosfromenumimportEnu

  • Java开发手册之集合处理「建议收藏」

    Java开发手册之集合处理「建议收藏」Java开发手册之集合处理

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号