<
pre
style
="
position
:
fixed
;
right
:
0
;
top
:
0
;
border
:
1px solid
;
"
>
{
{_data}}
</
pre
>
</
div
>
</
body
>
<
script
type
=
"
text/javascript
"
>
var
vm
=
new
Vue
(
{
el
:
'#vue_det'
,
data
:
{
site
:
"菜鸟教程"
,
url
:
"www.runoob.com"
,
alexa
:
"10000"
methods
:
{
details
:
function
(
)
{
return
this
.
site
+
" - 学的不仅是技术，更是梦想！"
;
</
script
>
</
html
>
-
要将
{
{_data}}
代码放在Vue实例挂载的DOM元素内；
-
Vue实例不可以通过JS动态添加新属性；
[1] 菜鸟教程[DB_OL]. https://www.runoob.com/vue2/vue-start.html
文章目录页面效果代码注意参考文献页面效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.min.js"></script></head><body><div id="vue_d
局组件和局部组件
1.先定义组件
Vue
.component(‘组件名’, { 组件模板对象 })
注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写
例如: 组件–>mtText 使用时–> <my></my>
2.配置组件的模板 注意: 组件的模板内容有且只有一个根元素
3.在视图层里调用 ,用双标签
4.组件是一个独立的作用域, 也可以看成一个特殊的
vue
实例
, 可以有data, methods,computed等等
注意: 组件的data是函数, 函数中需要返回一个对象作为组件的data
全局组件案例
install(
Vue
, options) {
Vue
.prototype.test = "test" ;
Vue
.prototype.wechat = "my wechat!";
export default MyPlugin
此方法可以单独起一个文件，在引入到需要的
页面
里面，就可以用
vue
实例
取到相应数据，像以下use后，取数据时和取每个模块里面的data里面的数据方法是一样的
import MyPligin from
vue
3.0要使用的方法都要从’
vue
’中引入，这里要引用ref
3.x版本定义的
变量
及声明的函数都要放在setup()函数里
使用ref声明一个
变量
，也可以是ref(20) ,ref ([1,2,3,4])等
setup中ref定义的
变量
及函数，全部都要retrun出去
使用ref定义的
变量
，可以直接用插值表达式
显示
②使用reactive定义
变量
当定义多个
变量
时，依次ref定义以及re
在多个地方调用，每次书写很麻烦，后期项目维护也不好管理。我们可以在src目录下创建一个api文件夹。
例如： 定义一个公共方法。
config.js: export const http=’//192.168.1.117:1009/’
在任何
页面
调用将http方法暴露出来 import {http} from “../../src/api/config”
this.$http.get('{http}/odd/list')
以上这篇在
vue
中多次调用同一个定义全局
变量
的
实例
就是小
说一种没人发的，利用混入mixins来实现全局
变量
和函数。mixins里面的方法、
变量
、筛选器会和组件里面的方法、
变量
、筛选器合并。这种方法优点是ide会有方法、
变量
、筛选器提示。
一、main.js文件
import
Vue
from '
vue
'
import App from './App'
import router from './router'
import store from './store'
import mixin from './utils/mixin'
Vue
.prototype.$bus = new
Vue
()
//进行全局混入
Vue
.mixin(mixin)
问题描述：
Vue
的标签属性label中字符串拼接
变量
<el-form-item :label="`参数${(index + 1)}类型`" v-for="(item, index,) in props.row.params">
<span v-text="item"></span>
</el-form-item>
结果展示...
重写JS保留小数-去尾法
weixin_58345141:
数据结构C-二叉树的二叉链表存储表示
大雪纷飞，亭间愁思何人懂:
数据结构C-二叉树的二叉链表存储表示
大雪纷飞，亭间愁思何人懂:
