vue样式条件和对象渲染

雨点打透心脏的1/2处 2022-01-27 11:53 128阅读 0赞

mounted  准备，安排

href  hyptertext reference 超文本引用，link和a标签使用

src  是source 源的意思，script和img标签使用

组件：

\# day10(Vue)

\#\#\#\# 一、Vue控制style样式(了解)

> Vue通过修改html的style属性值(行内式)控制 css

\`\`\`html

</div>

var vm = new Vue(\{

el: '\#app',

data: \{

mycolor: 'red',

myfontSize: '60px',

myobject1: \{

color: 'blue',

fontSize: '100px'

\},

myobject2: \{

background: '\#ccc'

\})

</script>

\`\`\`

\#\#\#\# 二、条件渲染

> 通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)

\- v-if

> 条件判断使用 v-if 指令

\- v-else

>  v-else 指令给 v-if 添加一个 "else" 块

\- v-else-if

> 用作 v-if 的 else-if 块

\-  v-show

> 使用v-show 指令显示和隐藏元素，与v-if最大区别在于v-show不删除元素

\`\`\`html

<div v-else>daqiu</div>

</div>

var vm = new Vue(\{

el: '\#app',

data: \{

bool1: true,

bool2: false,

type: 'D'

\})

</script>

\`\`\`

\#\#\#\# 三、列表与对象渲染

> 通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象

> 语法格式： v-for= '' data in container"

\`\`\`html

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

var vm = new Vue(\{

el: '\#app',

data: \{

// 数组

list1: \['朱毅', '王金泉', '林招亮'\],

// 对象

dict1:\{'name':'小张','age':30\}

\})

</script>

\`\`\`

\#\#\#\# 四、绑定表单数据

> \*\*v-model\*\* 指令用于设置表单控件value属性值

> 数据双向绑定：当数据发生变化的时候,视图也就发生变化,当视图发生变化时,数据也会跟着同步变化

\- \*\*文本输入框、下拉框框架绑定\*\*

\`\`\`html

</select>

</div>

var vm = new Vue(\{

el: '\#app',

data: \{

txt1: '默认值',

sel1: 0

\})

</script>

\`\`\`

\- \*\*单选框、复选框数据绑定\*\*

\`\`\`html

<div>\{ \{myradio\}\}</div>

性别：

<input type="radio" v-model="myradio" value="nan"> 男

<input type="radio" v-model="myradio" value="nv"> 女

兴趣爱好：

<input type="checkbox" value="read" v-model="list1"> 读书

<input type="checkbox" value="bahe" v-model="list1"> 拔河

<input type="checkbox" value="lol" v-model="list1"> lol

</div>

var vm = new Vue(\{

el: '\#app',

data: \{

myradio: 'nan',

list1: \['bahe'\]

\})

</script>

\`\`\`

\#\#\#\# \*\*五、Vue生命周期 \*\* new  init  del

> 每个Vue实例在被创建到销毁要经过一系列的过程，这整个过程称为Vue实例的生命周期

> Vue在生命周期不同的阶段点会自动运行一些函数， 这些函数称为Vue生命周期的钩子函数

\- \*\*生命周期钩子函数:\*\*

- \#\#\#\# beforeCreate

> 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

- \#\#\#\# created  vue对象 ， list1

> 在实例创建完成后被立即调用

- \#\#\#\# beforeMount

> 在挂载开始之前被调用：相关的 render 函数首次被调用

- \#\#\#\# mounted（最常用）

> 实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用

- \#\#\#\# beforeUpdate

> 数据发生变化前调用

- \#\#\#\# updated

> 数据发生变化后调用

\#\#\#\# 六、Vue与服务端数据交互

> vue.js没有集成ajax功能，要使用ajax功能，使用vue官方推荐的axios.js库来做ajax的交互

\- \*\*axios 使用\*\*

- \*\*引入函数库\*\*

\`<script src="js/vue.min.js"></script>\`

\`<script src="js/axios.min.js"></script>\`

- \*\*axios参数\*\*

\`\`\`html

axios(\{

//请求方式

method: 'post',

//请求路径

url: '/user/12345',

//请求参数

data: \{

name: 'xxx',

pwd: 'yyy'

\})

//访问成功回调的方法

.then(function(dat)\{

console.log(dat)

\})

//访问失败回调的方法

.catch(function(e)\{

\})

\`\`\`

\- \*\*综合小案例(miniweb)\*\*

\`\`\`html

<td>\{ \{i.sname\}\}</td>

</tr>

</table>

</div>

var vm = new Vue(\{

el: '\#container',

data: \{

list1: \[\]

\},

//vue实例与dom挂载好后，自动回调的方法

mounted: function () \{

axios(\{

url: '/index\_data',

method: 'get'

\}).then(function (dat) \{

console.log(dat.data)

// 数据放到列表list1 dat.data是\[\]  list1重新赋值

// this.list1 = dat.data  -- this指向不是对象  窗口对象

// alert(this)

vm.list1 = dat.data

\}).catch(function (e) \{

// 请求失败

\})

</script>

\`\`\`

vue样式条件和对象渲染

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue 条件渲染与列表渲染

相关 Vue 条件渲染

相关 vue条件渲染

相关 Vue_条件渲染和列表渲染

相关 Vue—-条件渲染

相关条件渲染 ——Vue.js

相关 vue样式条件和对象渲染

相关 Vue条件渲染

相关 Vue条件渲染

相关 Vue - 条件渲染